Detailed explanation of js motion event function

The example in this article shares the js motion event function for your reference. The specific content is as follows

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&#39;s more widely<br>
in the family pet.Cats ancestors is presumably desert cats</p>
<div class="breedsdog1">
<div class="img">
<img src="img2/labrador.jpg"/>
<a class="lookdog" href="#"></a>
</div>
<div class="img_txt">
<p class="chinese">拉布拉多</p>
<p class="english">Labrador</p>
<p class="introduce">
拉布拉多猎犬因原产地在加拿大的纽芬兰与拉布拉多省而得名。拉布拉多犬是一种中大型犬类，个性忠诚、大气、憨厚、温和、阳光、开朗、活泼，智商极高，也对人很友善，是非常适合被选作经常出入公共场合的导盲犬或地铁警犬及搜救犬和其他工作犬的狗品种，跟哈士奇（西伯利亚雪撬犬）和金毛猎犬并列三大无攻击性犬类，拉布拉多智商位列世界犬类第七。
</p>
</div>
</div>
 
</div>

CSS layout style omitted

Now I set the style of a.lookdog to position:absolutely, width and height Set to 0. Special effects achieved: When the mouse moves into div.img, the buffer animation of automatically expanding the width and height of a.lookdog is realized, and after the expansion is completed, the mask background layer becomes lower in transparency. Of course, we can also use CSS3 to achieve this kind of special effect, but the pitfall of CSS3 is that it does not fully support IE browser, so it is ideal to use JavaScript to implement motion buffer animation.

javascript

Function encapsulation part

//根据类名和父对象ID获取属性节点，解决getelementsByClass对浏览器的兼容性问题
 
function getbyclass(classname,parent){
 
    //传入ID获取父节点，如果该参数为空就为document
 
  
var oParent=parent?document.getElementById(parent):document;
 
    //定义一个空数组来存放属性节点
 var els=[];
 
    //定义一个数组存放父对象的所有子节点
 
  
var elements=oParent.getElementsByTagName("*");
 
    //遍历所有子节点，根据类名把所有的子对象找出来，并且放在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?Math.ceil(speed):Math.floor(speed);
  if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();//回调函数，判断是否有多次执行
  }else{
obj.style[stylename]=(offvalue+speed)/100;
obj.style.filter="alpha(opacity:"+(offvalue+speed)+")";
  }
}else{
var offvalue=parseInt(getStyle(obj,stylename));
var speed=(jason[stylename]-offvalue)/average;
  speed=speed>0?Math.ceil(speed):Math.floor(speed);
  if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();
  }else{
obj.style[stylename]=offvalue+speed+"px";
  }
  }
}
},cycle);
}

Page initialization function, method call

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);
    });
}
}
 
}

The effect of moving the mouse in and out is as follows, I added a few more div.img, you can see the same width The high change is complete, and then the transparency changes.