js-Animationslernen (4)

7. Multi-Attribut-Kapselungsfunktion



Im vorherigen Abschnitt haben wir die Animation zum Ändern des Werts eines einzelnen Attributs vorgestellt Multi-Attribut-Kapselungsfunktion. Eine Funktion kann mehrere Attributwerte verarbeiten.

Führen Sie zunächst eine sehr wichtige Funktion getStyle() ein. Diese Funktion gibt den aktuellen Attributwert eines Elements zurück. Die beiden formalen Parameter sind Elemente und Attribute. Achten Sie auf Probleme mit der Browserkompatibilität.

//获得元素样式专用封装函数，返回该属性的当前值
 function getStyle(obj,attr) {
     if (obj.currentStyle) {//IE浏览器
         return obj.currentStyle[attr];
     } else {
         return getComputedStyle(obj,false)[attr];//火狐浏览器
     }
 }

Der nächste Punkt ist, dass eine Funktion die Animation zum Ändern mehrerer Attribute implementiert:

//多物体改变样式(宽，高，字体大小，边框等，透明度需单独分析）速度缓冲封装函数
function startMove(obj,attr,target) {//元素，改变的样式属性，达到的目标值
    clearInterval(obj.timer);//首先清除定时器
    obj.timer=setInterval(function(){
        //1.取当前值
        var icur=0;//icur返回物体样式属性值的大小
        if (attr=='opacity') {//如果属性是透明度，透明度的返回值是零点几的小数
            icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
        } else {
            icur=parseInt(getStyle(obj,attr));
        }
        //2.算速度
        var speed=(target-icur)/8;//分母为比例系数K，可调
        speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
        //3.检测运动是否停止
        if (icur==target) {
            clearInterval(obj.timer);
        } else {
            if (attr=='opacity') {
                obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器
                obj.style.opacity=(icur+speed)/100;//火狐浏览器
            } else {
                obj.style[attr]=icur+speed+'px';
            }
        }
    },30)
}

Lassen Sie es uns anhand von zwei Divs überprüfen:

<style type="text/css">
     #div1,#div2{
         width: 200px;
         height: 200px;
         background: red;
         border: 1px solid black;
         margin-bottom: 10px;
     }
 </style>

<div id="div1"></div>
 <div id="div2"></div>
 <script type="text/javascript">
 window.onload=function(){
     var ob1=document.getElementById(&#39;div1&#39;);
     var ob2=document.getElementById(&#39;div2&#39;);
     ob1.onmouseover=function(){
         startMove(this,&#39;width&#39;,400);
     }
     ob1.onmouseout=function(){
         startMove(this,&#39;width&#39;,200);
     }
     
     ob2.onmouseover=function(){
         startMove(this,&#39;opacity&#39;,31);
     }
     ob2.onmouseout=function(){
         startMove(this,&#39;opacity&#39;,100);
     }
     //alert(parseFloat(0.07*100));弹出7.00000000001而不是7    所以上面程序中的parseFloat前加四舍五入Math.round函数
 }
 </script>

Auf diese Weise können die Breite und Transparenz des Objekts durch eine startMove()-Funktion geändert werden.



8. Kettenbewegung



Worüber wir oben gesprochen haben, ist, dass ein Ereignis eine Bewegung auslöst Breite einer div. Kettenbewegung der Transparenz. Fügen Sie basierend auf der obigen startMove-Funktion einen formalen Parameter fn als Rückruffunktion hinzu; fügen Sie eine Beurteilung innerhalb des Programms hinzu, um zu erkennen, ob die Bewegung gestoppt wurde: if(fn) fn(); in Zeile 18 des Codes:

//多物体改变样式(宽，高，字体大小，边框等，透明度单独分析）速度缓冲封装函数
 function startMove(obj,attr,target,fn) {//元素，改变的样式属性，达到的目标值，回调函数
     clearInterval(obj.timer);
     obj.timer=setInterval(function(){
         //1.取当前值
         var icur=0;//icur返回物体样式属性值的大小
         if (attr=='opacity') {//如果属性是透明度，透明度的返回值是零点几的小数
             icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
         } else {
             icur=parseInt(getStyle(obj,attr));
         }
         //2.算速度
         var speed=(target-icur)/8;//分母为比例系数K，可调
         speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
         //3.检测运动是否停止
         if (icur==target) {
             clearInterval(obj.timer);
             if(fn){//上一个运动停止后判断一下是否还有下一个运动，如果有的话就执行回调函数
                 fn();
             }
         } else {
             if (attr=='opacity') {
                 obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器
                 obj.style.opacity=(icur+speed)/100;//火狐浏览器
             } else {
                 obj.style[attr]=icur+speed+'px';
             }
         }
     },30)
 }

Das Folgende ist ein einfaches Div

<style type="text/css">
     #div1{
         width: 200px;
         height: 200px;
         background: red;
         border: 2px solid black;
         filter: alpha(opacity:30);
         opacity: 0.3;
     }
 </style>

Achten Sie auf die Funktionsverschachtelung im js-Teil:

<div id="div1"></div>
 <script type="text/javascript">
 window.onload=function(){
     var ob1=document.getElementById(&#39;div1&#39;);
     ob1.onmouseover=function(){
         startMove(ob1,&#39;width&#39;,400,function(){
             startMove(ob1,&#39;height&#39;,400,function(){
                 startMove(ob1,&#39;opacity&#39;,100);
             })
         });
     }
     ob1.onmouseout=function(){
         startMove(ob1,&#39;opacity&#39;,30,function(){
             startMove(ob1,&#39;height&#39;,200,function(){
                 startMove(ob1,&#39;width&#39;,200);
             })
         });
     }
 }

Die Reihenfolge der Änderungen beim Verlassen der Maus ist die das Gegenteil davon, wenn die Maus darüber fährt.

Das Obige ist der Inhalt des js-Animationslernens (4). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!