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

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

JS動畫效果

vivian Web前端工程師
難度初級
時長 2小時 8分
學習人數
綜合評分9.60
537人評價 查看評價
9.8 內容實用
9.6 簡潔易懂
9.4 邏輯清晰
  • 透明度的更改 window.onload=function(){ var oDiv=document.getElementById('div'); oDiv.onmouseover=function(){ startMove(100); } oDiv.onmouseout=function(){ startMove(30); } var timer=null; var alpha=30; function startMove(iTarget){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var speed=0; if (alpha>iTarget) { speed=-10; else{ speed=10; } }; if (alpha==iTarget) { clearInterval(timer); } else{ alpha+=speed; oDiv.style.filter='alpha(opactiy:'+alpha')'; oDiv.style.opactiy=alpha/100; }; }) } }
    查看全部
    0 采集 收起 來源:JS透明度動畫

    2018-03-22

  • JQuery動畫
    查看全部
    0 采集 收起 來源:jQuery動畫案例

    2015-11-01

  • //最終封裝的'完美移動框架' function startMove(obj,json,fn){ var flag=true;//標志所有運動是否到達目標值 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var curr=0; //判斷是否為透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移動速度處理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[attr]){ flag=false; } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fu(); } } },30); } //取樣式 function getStyle(obj,attr){ if(obj.currentStyle){//IE取樣式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
  • 跟智能社的一樣……
    查看全部
    0 采集 收起 來源:JS鏈式動畫

    2015-10-31

  • 區別是:obj.style.width 是獲取的content區的寬度,并且只能獲取行內樣式;而offsetWidth獲取的是盒子寬度。 例如: <div class="d"></div> .d{ width:200px; height:200px; border:10px #ccc solid; padding:10px; background:red; } d.offsetWidth = 200(content區寬度) + 10X2(兩邊的padding) + 10X2(兩邊的border) = 240 友情贈送另外一個:clientWidth d.clientWidth = 200(content區寬度) + 10X2(兩邊的padding) = 220
    查看全部
    0 采集 收起 來源:獲取樣式

    2018-03-22

  • 獲取樣式,有兩種方法: 1、dom.style.xxx 這種寫法只能獲取行內樣式 例如 <div ></div> div.style.width能獲取到是200px,但是沒有出現在 引號中的樣式是獲取不到的 2、萬能方法。 getComputedStyle(div,null).xxx 這個是標準方法,需要做一下兼容 currentStyle 是IE的 3、友情贈送獲取任何樣式的代碼 1 2 3 4 5 6 7 function getStyle(obj,style){ if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }
    查看全部
    0 采集 收起 來源:獲取樣式

    2018-03-22

  • JS取整函數: 1、向上取整:Math.floor(); 2、向下取整:Math.ceil();
    查看全部
    0 采集 收起 來源:JS緩沖動畫

    2015-10-31

  • 多物體運動的所有屬性都不能公用
    查看全部
    0 采集 收起 來源:JS多物體動畫

    2015-10-30

  • 獲取樣式,有兩種方法: 1、dom.style.xxx 這種寫法只能獲取行內樣式 例如 <div ></div> div.style.width能獲取到是200px,但是沒有出現在 引號中的樣式是獲取不到的 2、萬能方法。 getComputedStyle(div,null).xxx 這個是標準方法,需要做一下兼容 currentStyle 是IE的 3、友情贈送獲取任何樣式的代碼 function getStyle(obj,style){ if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }
    查看全部
    0 采集 收起 來源:獲取樣式

    2018-03-22

  • 運動框架實現思路
    查看全部
  • ele.currentStyle[attribute]//chrome ele.getComputedStyle(obj, false)[attribute] //firfox
    查看全部
    0 采集 收起 來源:獲取樣式

    2015-10-27

  • 用getEventListeners(obj)獲取綁定在obj上的event
    查看全部
    0 采集 收起 來源:獲取樣式

    2015-10-25

  • 獲取對象的屬性用getComputedStyle(obj, attr)方法, 兼容IE用obj.currentStyle[attr]; 如下: function getStyle(obj, attr) { if (obj.currentStyle) {// IE return obj.currentStyle[attr]; }else {// Firefox chrome return getComputedStyle(obj, false)[attr]; } }
    查看全部
    0 采集 收起 來源:獲取樣式

    2015-10-25

  • 獲取樣式的值
    查看全部
    0 采集 收起 來源:獲取樣式

    2015-10-24

  • $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"200px",opacity:0},300,function(){ $(this).css({top:-200}); $(this).animate({top:"0px",opacity:100},200); }); }); });
    查看全部
    0 采集 收起 來源:jQuery動畫案例

    2018-03-22

舉報

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

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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