亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

JS動畫效果

vivian Web前端工程師
難度初級
時長 2小時 8分
學習人數
綜合評分9.60
537人評價 查看評價
9.8 內容實用
9.6 簡潔易懂
9.4 邏輯清晰
  • <script> window.onload = function(){ var txt1 = document.getElementById("txt1"); var txt2 = document.getElementById("txt2"); txt1.onmouseover = function(){ startMove(this,400,"height"); } txt1.onmouseout = function(){ startMove(this,200,"height"); } txt2.onmouseover = function(){ startMove(this,400,"width"); } txt2.onmouseout = function(){ startMove(this,200,"width"); } } //var timer = null; function startMove(obj,iTarget,attr){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur = parseInt(getStyle(obj,attr)); var speed = (iTarget-cur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == iTarget){ clearInterval(obj.timer); }else{ obj.style[attr] = cur+speed+"px"; } },30) } //獲取style樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } </script>
    查看全部
  • 功能不相同的代碼可以當做一個參數傳值,功能相同的代碼合并
    查看全部
  • 在用到obj.offsetWidth或者obj.offsetHeight的時候,如果,obj對象的樣式有border等屬性,則需要用getStyle()函數解決實際width和height值樣式不兼容的問題 //獲取style樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
  • <script> window.onload = function(){ setInterval(function(){ startMove(); },30) } function startMove(){ var oDiv = document.getElementById("oDiv"); //console.log(oDiv.offsetWidth); oDiv.style.width = parseInt(getStyle(oDiv,"width"))-1+"px"; } //獲取style樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } </script>
    查看全部
    0 采集 收起 來源:獲取樣式

    2018-03-22

  • <script> window.onload = function(){ var aLis = document.getElementsByTagName("li"); for(var i=0;i<aLis.length;i++){ aLis[i].timer = null; aLis[i].onmouseover = function(){ startMove(this,400); } aLis[i].onmouseout = function(){ startMove(this,200) } } } //var timer =null; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget - obj.offsetWidth)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); obj.style.width = obj.offsetWidth+speed+"px"; },30) } </script>
    查看全部
    0 采集 收起 來源:JS多物體動畫

    2018-03-22

  • var speed = (iTarget - box.offsetLeft)/20; speed = speed>0?Math.ceil(speed):Math.floor(speed); Math.floor(3.98)向下取整; Math.ceil(3.2)向上取整
    查看全部
    0 采集 收起 來源:JS緩沖動畫

    2018-03-22

  • 1.全局變量和它的作用域   全局變量是指在程序開頭的說明部分定義和說明的量。它的作用域分為兩種情況: (1)在全局變量和局部變量不同名時,其作用域是整個程序。 (2)在全局變量和局部變量同名時,全局變量的作用域不包含同名局部變量的作用域。 2.局部變量和它的作用域   凡是在子程序內部使用的變量,必須在子程序中加入說明。這種在子程序內部說明的變量稱為局部變量。局部變量的作用域是其所在的子程序。形式參數也只能在子程序中有效。因此也屬于局部變量。局部變量的作用域分為兩種情況: (1)當外層過程序的局部變量名和嵌套過程中的局部變量不同名時,外層過程的局部變量作用域包含嵌套過琛。 (2)當外層過程的局部變量名和嵌套過程內的局部變量名同名時,外層局部變量名的作用域不包含此過程。
    查看全部
    0 采集 收起 來源:JS速度動畫

    2015-06-02

  • 取得行內樣式
    查看全部
    0 采集 收起 來源:獲取樣式

    2015-06-01

  • 鼠標移入時:
    查看全部
  • 鏈式運動
    查看全部
    0 采集 收起 來源:同時運動

    2015-05-08

  • function move(obj,json,fn){ var flag=true;//假設同時運動都完成了 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ if(attr=='opacity'){ var icur=Math.round(parseFloat(getStyle(obj,attr))*100);//四舍五入,否則會出現很長一串數字,0.07*100結果為7.0000000000001 }else{ var icur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur!=json[attr]){ flag=false;//所有的同時運動沒有全部完成 } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } if(flag){//所有的同時運動都完成了 clearInterval(obj.timer); if(fn){ fn(); } } } },30) } //getStyle獲取的是單一樣式,backgroundColor不能獲取background復合樣式 //獲取的是自己設置過的樣式 //要遵守上面兩條,否則有兼容性問題 function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]; }
    查看全部
  • obj.offsetWidth=width+padding+border 取出的為數值且是css,js共同影響的結果 function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]; } parseInt(getStyle(oDiv,'width'))這樣結果才為數值
    查看全部
    0 采集 收起 來源:獲取樣式

    2015-05-03

  • img{ opacity:0.3;/*針對除了ie之外的其他標準瀏覽器*/ filter:alpha(opacity:30);/*針對ie*/}
    查看全部
    0 采集 收起 來源:JS透明度動畫

    2015-05-03

  • if(oDiv.offsetLeft==0){ clearInterval(timer); return; }
    查看全部
    0 采集 收起 來源:JS速度動畫

    2015-05-03

  • 解決上面的問題,第二個方法。封裝一個getStyle方法。
    查看全部
    0 采集 收起 來源:獲取樣式

    2015-04-24

舉報

0/150
提交
取消
課程須知
1.您至少已經具備JavaSript的知識。2.您已經具備一些開發經驗。
老師告訴你能學到什么?
1.使用定時器實現簡單動畫。2.如何一步步封裝庫。2.培養編程的思想。

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!