首頁 > web前端 > js教程 > js動畫學習(四)

js動畫學習(四)

黄舟
發布: 2016-12-30 16:57:57
原創
1244 人瀏覽過

七、多屬性封裝函數 



前面分別介紹了單獨改變單一屬性值得動畫,從本節起開始介紹多屬性封裝函數,一個函數搞定多種屬性值的改變。

首先介紹一個很重要的函數getStyle(),這個函數傳回一個元素的目前屬性值。兩個形參分別是元素和屬性。注意瀏覽器的相容性問題。

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

接下來重點來了,一個函數實現改變多種屬性的動畫:

//多物体改变样式(宽,高,字体大小,边框等,透明度需单独分析)速度缓冲封装函数
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)
}
登入後複製

我們透過兩個div來驗證一下:

<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>
登入後複製


這樣就實現了透過一個startMove()函數實現改變物體的寬廣度和透明度了。



八、鍊式運動



上面講的都是一個事件激發一個運動,本節介紹一個div的寬、高、透明度的鍊式運動。在上面的startMove函數基礎上加一個形參fn,作為回調函數;在程式內部的偵測運動是否停止部分加一個判斷:if(fn) fn();在程式碼18行:

//多物体改变样式(宽,高,字体大小,边框等,透明度单独分析)速度缓冲封装函数
 function startMove(obj,attr,target,fn) {//元素,改变的样式属性,达到的目标值,回调函数
     clearInterval(obj.timer);
     obj.timer=setInterval(function(){
         //1.取当前值
         var icur=0;//icur返回物体样式属性值的大小
         if (attr==&#39;opacity&#39;) {//如果属性是透明度,透明度的返回值是零点几的小数
             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==&#39;opacity&#39;) {
                 obj.style.filter=&#39;alpha(opacity:&#39;+(icur+speed)+&#39;)&#39;;//IE浏览器
                 obj.style.opacity=(icur+speed)/100;//火狐浏览器
             } else {
                 obj.style[attr]=icur+speed+&#39;px&#39;;
             }
         }
     },30)
 }
登入後複製

下面是個簡單的div

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

注意看js部分的函數巢狀:

<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);
             })
         });
     }
 }
登入後複製

滑鼠離開的變化順序與滑鼠經過時的相反。

以上就是js動畫學習(四)的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板