当前位置:首页 >> 网络编程

js运动事件函数详解

本文实例为大家分享了js运动事件函数,供大家参考,具体内容如下

HTML

<div id="breedsdog">
<h2 class="title">The Dog</h2>
<p class="describe">Split between cat,belong to the cat family,cat,cat,is the world's more widely<br>
in the family pet.Cats ancestors is presumably desert cats</p>
<div class="breedsdog1">
<div class="img">
<img src="/UploadFiles/2021-04-02/labrador.jpg">

CSS布局样式省略

现在a.lookdog的样式我设为position:absolutely,宽高设为0。实现的特效:当鼠标移入div.img上,实现a.lookdog的宽高自动展开的缓冲动画,并且展开完毕后,透明度变低的遮罩背景图层。当然我们用css3也能实现这种特效,但是css3的坑是不完全支持IE浏览器,所以用javascript来实现运动缓冲动画是最理想的。

javascript

函数封装部分

//根据类名和父对象ID获取属性节点,解决getelementsByClass对浏览器的兼容性问题

function getbyclass(classname,parent){

    //传入ID获取父节点,如果该参数为空就为document

 
var oParent=parent"*");

    //遍历所有子节点,根据类名把所有的子对象找出来,并且放在els数组内
 for(var i=0;i<elements.length;i++){
 if(elements[i].className==classname){
 els.push(elements[i]);
 }
 }
 return els;
 }

//根据对象要获取的属性名来得到属性值

function getStyle(obj,stylename){

    //针对IE浏览器获取样式方法
if(obj.currentStyle){
return obj.currentStyle[stylename];

    //针对其他浏览器获取样式方法
}else if(getComputedStyle(obj,false)){
return getComputedStyle(obj,false)[stylename];
}
}

//缓冲动画主函数,传参类型:(对象,jaso格式要改变的样式值(可多个),缓冲系数,执行周期时间(值越小速度越快,越大越慢),回调函数(是否有多次动画的播放,可有可无))

function MoveJason(obj,jason,average,cycle,continuefunction){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var stylename in jason){//针对多效果的缓冲动画
// obj.style[stylename]=jason[stylename];
// }
if(stylename=="opacity"){
var offvalue=Math.round(parseFloat(getStyle(obj,stylename))*100);
var speed=(jason[stylename]-offvalue)/average;
  speed=speed>0"alpha(opacity:"+(offvalue+speed)+")";
  }
}else{
var offvalue=parseInt(getStyle(obj,stylename));
var speed=(jason[stylename]-offvalue)/average;
  speed=speed>0"px";
  }
  }
}
},cycle);
}

页面初始化函数,方法调用

window.onload=function(){

var imgdog=getbyclass("img","breedsdog");//在父对象breedsdog上找到所有的div.img

    //给所有的div.img添加鼠标移入,鼠标移出事件
for(var i=0;i<imgdog.length;i++){

imgdog[i].onmouseover=function(){
var obj=this.children[1];
            MoveJason(obj,{"height":376,"width":206},5,30,function(){//缓冲动画的函数调用,当执行完宽高值的缓冲变化,再回调函数执行透明度缓冲变化。以下同理,可以多层嵌套实现多个回调。
        MoveJason(obj,{"opacity":30},5,30);
    });
}
imgdog[i].onmouseout=function(){
var obj=this.children[1];
            MoveJason(obj,{"height":0,"width":0},5,30,function(){
        MoveJason(obj,{"opacity":80},5,30);
    });
}
}

}

鼠标移入移出效果图如下,我多加个了几个div.img,可以看到等宽高变完,然后透明度发生变化。

js运动事件函数详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。