Detaillierte Erläuterung der js-Motion-Event-Funktion

Das Beispiel in diesem Artikel teilt die js-Bewegungsereignisfunktion als Referenz. Der spezifische Inhalt ist wie folgt:

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-Layoutstil weggelassen

Jetzt setze ich den Stil von a.lookdog auf position:absolutely und setze die Breite und Höhe auf 0. Erzielte Spezialeffekte: Wenn sich die Maus in div.img bewegt, wird die Pufferanimation zum automatischen Erweitern der Breite und Höhe von a.lookdog realisiert, und nach Abschluss der Erweiterung wird die Transparenz der Maskenhintergrundebene verringert. Natürlich können wir auch CSS3 verwenden, um diese Art von Spezialeffekten zu erzielen. Der Nachteil von CSS3 besteht jedoch darin, dass es den IE-Browser nicht vollständig unterstützt. Daher ist es ideal, JavaScript zum Implementieren von Bewegungspufferanimationen zu verwenden.

Javascript

Funktionskapselungsteil

//根据类名和父对象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);
}

Seiteninitialisierungsfunktion, Methodenaufruf

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

Der Effekt des Hinein- und Herausbewegens der Maus ist wie folgt: Ich habe ein paar weitere div.img hinzugefügt. Sie können sehen, dass sich die gleiche Breite und Höhe geändert hat die Transparenz ändert sich.