js运动事件函数详解

本文实例为大家分享了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






拉布拉多
Labrador

拉布拉多猎犬因原产地在加拿大的纽芬兰与拉布拉多省而得名。拉布拉多犬是一种中大型犬类，个性忠诚、大气、憨厚、温和、阳光、开朗、活泼，智商极高，也对人很友善，是非常适合被选作经常出入公共场合的导盲犬或地铁警犬及搜救犬和其他工作犬的狗品种，跟哈士奇（西伯利亚雪撬犬）和金毛猎犬并列三大无攻击性犬类，拉布拉多智商位列世界犬类第七。



 

   

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?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
   
鼠标移入移出效果图如下，我多加个了几个div.img，可以看到等宽高变完，然后透明度发生变化。