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&#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佈局省略

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

   

頁初始化函數，方法調用

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

  看到了幾個效果高變完，然後透明度改變。