欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例

 更新時(shí)間:2017年03月08日 08:56:39   作者:筱葭  
本篇文章主要介紹了淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例,希望此文章對各位有所幫助。

參數(shù)介紹:

obj
執(zhí)行動(dòng)畫的元素
css JSON數(shù)值對,形式為“{屬性名: 屬性值}",指要執(zhí)行動(dòng)畫的書序及其對應(yīng)值
interval
屬性每執(zhí)行一次改變的時(shí)間間隔
speedFactor 速度因子,使動(dòng)畫具有緩沖效果,而不是勻速不變(speedFactor為1)
func 執(zhí)行完動(dòng)畫后的回調(diào)函數(shù)

注意:

必須為每一個(gè)元素分別添加一個(gè)定時(shí)器,否則會(huì)互相影響。

cur != css[arr]判斷是否每一個(gè)屬性已經(jīng)達(dá)到目標(biāo)值。只有所有屬性都達(dá)到目標(biāo)值,才會(huì)清除定時(shí)器,flag的作用是防止某個(gè)屬性第一個(gè)達(dá)到目標(biāo)值但還有其他屬性沒有達(dá)到目標(biāo)值的情況下清除定時(shí)器。因此,在每次改變前初始化flag為true,只要遇到一個(gè)沒有達(dá)到目標(biāo)的屬性,就將flag置為false,直至所有屬性達(dá)到目標(biāo)值才清除定時(shí)器。

屬性值opacity的值有小數(shù),所以需要特殊處理: Math.ceil(speed)和Math.floor(speed)以及* 100和 / 100操作。

function animate(obj, css, interval, speedFactor, func) { 
  clearInterval(obj.timer); 
  function getCss(obj, prop) { 
    if (obj.currentStyle) 
      return obj.currentStyle[prop]; // ie 
    else  
      return document.defaultView.getComputedStyle(obj, null)[prop]; // 非ie 
  } 
  obj.timer = setInterval(function(){ 
    var flag = true; 
    for (var prop in css) { 
      var cur = 0; 
      if(prop == "opacity")  
        cur = Math.round(parseFloat(getStyle(obj, prop)) * 100); 
      else  
        cur = parseInt(getStyle(obj, prop)); 
      var speed = (css[prop] - cur) * speedFactor; 
      speed = speed > 0 ? Math.ceil(speed): Math.floor(speed); 
      if (cur != css[prop]) 
        flag = false; 
      if (prop == "opacity") { 
        obj.style.filter = "alpha(opacity : '+(cur + speed)+' )"; 
        obj.style.opacity = (cur + speed) / 100; 
} 
      else  
        obj.style[prop] = cur + speed + "px"; 
    } 
    if (flag) { 
      clearInterval(obj.timer); 
      if (func) 
        func(); 
    } 
  }, interval); 
} 
var li = document.getElementsByTagName("li"); 
for(var i = 0; i < li.length; i ++){ 
  li[i].onmouseover = function(){ 
    animate(this, {width: 100, opacity: 0.5}, 10, 0.01, function(){ 
      alert("Finished!"); 
    }); 
  } 
} 

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論