本文實例為大家分享了js運動事件函數,供大家參考,具體內容如下
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佈局省略
現在a.lookdog的樣式我設定為高分鐘,高設為0。實現的特效:當滑鼠移入div.img上,實現a.lookdog的寬高自動展開的緩衝動畫,並且展開完畢後,透明度變低的遮罩背景圖層。當然我們用css3也能達到這個特效,但css3的坑是不完全支援IE瀏覽器,所以用javascript來實現運動緩衝動畫是最理想的。
javascript
函數封裝部分
//根据类名和父对象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); }
頁初始化函數,方法調用
window.onload=function(){ var imgdog=getbyclass("img","breedsdog");//在父对象breedsdog上找到所有的div.img //给所有的div.img添加鼠标移入,鼠标移出事件 for(var i=0;i看到了幾個效果高變完,然後透明度改變。