成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

通過改變屬性來實(shí)現(xiàn)動(dòng)畫

wangbinke / 1168人閱讀

摘要：今天這篇文章主要簡述如何通過改變屬性來實(shí)現(xiàn)動(dòng)畫效果，比如通過定時(shí)器快速改變等屬性，實(shí)現(xiàn)圖形在的頁面上做勻速的運(yùn)動(dòng)。

今天這篇文章主要簡述js如何通過改變屬性來實(shí)現(xiàn)動(dòng)畫效果，比如通過定時(shí)器快速改變width, height, left, top等屬性，實(shí)現(xiàn)圖形在html的頁面上做勻速的運(yùn)動(dòng)。

現(xiàn)在就有這樣的一個(gè)需求，定義2個(gè)不同背景顏色的物體，當(dāng)點(diǎn)擊按鈕的時(shí)候，實(shí)現(xiàn)向左，向下勻速
運(yùn)動(dòng)。

關(guān)鍵語法：
1,獲取當(dāng)前dom的指定屬性值

function computedStyle(dom,attr) {        
        if(getComputedStyle) {
            return getComputedStyle(dom,"")[attr]
        } else {
            return dom.currentStyle()[attr] //兼容IE
        }
  }

這個(gè)方法定義的目的是為了獲取dom 屬性的值，例如：
dom: "

",調(diào)用這個(gè)方法
computedStyle(dom,"width") 返回 30。

2，定時(shí)器，返回這個(gè)定時(shí)器的唯一id標(biāo)識

  timerId = setInterval(function(){
  },1000);

這個(gè)定時(shí)器的主要目的是為了勻速改變dom的屬性的值

示例：

   #box{                
        width: 100px; 
        height: 100px; 
        background: red; 
        position:absolute; 
        /*getComputedStyle 方法取屬性左邊的值"left" 為800*/
        left: 800px;  
        top: 50px;
    }


    #box1{                
        width: 100px; 
        height: 100px; 
        background: blue; 
        position:absolute; 
        left: 900px; 
        top: 50px;
    }

    
    
box

    
box1


    //封裝獲取id的方法
    function $(id) {
        return document.getElementById(id);
    }
                
            
    //獲取計(jì)算后的屬性  attr="width"
    function computedStyle(dom,attr) {
        
        if(getComputedStyle) {
            return getComputedStyle(dom,"")[attr]
        } else {
            return dom.currentStyle()[attr]
        }
    }
            
    window.onload=function(){
                
        var btn=$("button");
        
        var box=$("box");
        
        var box1=$("box1");
        
        btn.onclick=function(){
                                
            animate(box,"left",100);
            
            animate(box1,"top",400);
        }
            
        function animate(dom,attr,target){                
                    
                    //多個(gè)元素一起運(yùn)動(dòng)  每個(gè)元素綁定一個(gè)屬性放當(dāng)前運(yùn)動(dòng)的定時(shí)器
                    dom.timer=setInterval(function() {                    
                        var current=parseInt(computedStyle(dom,attr));  
                        var step=(target>current)?1:-1;   
                        /*目標(biāo)大于當(dāng)前值 +1  目標(biāo)小于當(dāng)前值-1*/                

                        if(target==current) { 
                        // 如果等于100的時(shí)候退出，也是定時(shí)器退出的條件        
                            dom.style[attr]=target+"px";
                            
                            clearInterval(dom.timer);
                            
                            return false;
                        }
                        //改變位置
                        
                        dom.style[attr]=(current+step)+"px";
                        //改變style的屬性，實(shí)現(xiàn)動(dòng)畫
                        
                    },10)
                    //每10毫秒改變一次
                }
            }

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/90785.html

相關(guān)文章

  • 04.Android之動(dòng)畫問題

    摘要：動(dòng)畫占用大量內(nèi)存，如何優(yōu)化使用動(dòng)畫的注意事項(xiàng)有哪些問題這個(gè)問題主要出現(xiàn)在幀動(dòng)畫中，當(dāng)圖片數(shù)量較多且圖片較大時(shí)就極易出現(xiàn)，這個(gè)在實(shí)際開發(fā)中要尤其注意，盡量避免使用幀動(dòng)畫。 目錄介紹 4.0.0.1 Android中有哪幾種類型的動(dòng)畫，屬性動(dòng)畫和補(bǔ)間動(dòng)畫有何區(qū)別？補(bǔ)間動(dòng)畫和屬性動(dòng)畫常用的有哪些？ 4.0.0.2 View動(dòng)畫為何不能真正改變View的位置？而屬性動(dòng)畫為何可以？屬性動(dòng)畫是如...

    Muninn 評論0 收藏0

  • 通過改變屬性來實(shí)現(xiàn)動(dòng)畫

    摘要：今天這篇文章主要簡述如何通過改變屬性來實(shí)現(xiàn)動(dòng)畫效果，比如通過定時(shí)器快速改變等屬性，實(shí)現(xiàn)圖形在的頁面上做勻速的運(yùn)動(dòng)。 今天這篇文章主要簡述js如何通過改變屬性來實(shí)現(xiàn)動(dòng)畫效果，比如通過定時(shí)器快速改變width, height, left, top等屬性，實(shí)現(xiàn)圖形在html的頁面上做勻速的運(yùn)動(dòng)。 現(xiàn)在就有這樣的一個(gè)需求，定義2個(gè)不同背景顏色的物體，當(dāng)點(diǎn)擊按鈕的時(shí)候，實(shí)現(xiàn)向左，向下勻速運(yùn)動(dòng)。 ...

    Sleepy 評論0 收藏0

  • 通過改變屬性來實(shí)現(xiàn)動(dòng)畫

    摘要：今天這篇文章主要簡述如何通過改變屬性來實(shí)現(xiàn)動(dòng)畫效果，比如通過定時(shí)器快速改變等屬性，實(shí)現(xiàn)圖形在的頁面上做勻速的運(yùn)動(dòng)。 今天這篇文章主要簡述js如何通過改變屬性來實(shí)現(xiàn)動(dòng)畫效果，比如通過定時(shí)器快速改變width, height, left, top等屬性，實(shí)現(xiàn)圖形在html的頁面上做勻速的運(yùn)動(dòng)。 現(xiàn)在就有這樣的一個(gè)需求，定義2個(gè)不同背景顏色的物體，當(dāng)點(diǎn)擊按鈕的時(shí)候，實(shí)現(xiàn)向左，向下勻速運(yùn)動(dòng)。 ...

    leanxi 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<