Home > Article > Web Front-end > 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
The Dog
Split between cat,belong to the cat family,cat,cat,is the world's more widely
in the family pet.Cats ancestors is presumably desert cats
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;i0?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
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.