Maison > interface Web > js tutoriel > JS implémente l'animation animate() de jQuery

JS implémente l'animation animate() de jQuery

小云云
Libérer: 2018-01-23 10:28:02
original
1846 Les gens l'ont consulté

Cet article présente principalement l'exemple d'animation animate() de jQuery implémenté en JS natif. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Introduction aux paramètres :

tr>
obj
obj
执行动画的元素
css JSON数值对,形式为“{属性名: 属性值}",指要执行动画的书序及其对应值
interval
属性每执行一次改变的时间间隔
speedFactor 速度因子,使动画具有缓冲效果,而不是匀速不变(speedFactor为1)
func 执行完动画后的回调函数
Exécuter l'animation La paire de valeurs de l'élément
css JSON, sous la forme de "{nom de l'attribut : valeur de l'attribut}", fait référence à la séquence de livres à animer et sa valeur correspondante

intervalle
L'intervalle de temps pour chaque changement de l'attribut
speedFactor Le facteur de vitesse donne à l'animation un effet tampon au lieu d'une vitesse constante (speedFactor est 1)
func Fonction de rappel après l'exécution de l'animation

Remarque :

Une minuterie doit être ajoutée pour chaque element , sinon ils s’influenceront mutuellement.

cur != css[arr] détermine si chaque attribut a atteint la valeur cible. Le minuteur sera effacé uniquement lorsque tous les attributs atteignent la valeur cible. La fonction du drapeau est d'empêcher le minuteur d'être effacé lorsqu'un certain attribut est le premier à atteindre la valeur cible mais que d'autres attributs n'ont pas atteint la cible. valeur. Par conséquent, initialisez l'indicateur sur true avant chaque modification. Dès que vous rencontrez un attribut qui n'atteint pas la cible, définissez l'indicateur sur false. Le minuteur ne sera pas effacé tant que tous les attributs n'atteindront pas la valeur cible.


La valeur de l'attribut opacity a des décimales, un traitement spécial est donc nécessaire : Math.ceil(speed) et Math.floor(speed) ainsi que les opérations * 100 et / 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!"); 
    }); 
  } 
}
Copier après la connexion


Recommandations associées :

La réponse animate() de Jquery est trop lente pour résoudre le problème

Compréhension approfondie de l'animation personnalisée jquery animate()

Exemples d'utilisation de la méthode animate() dans jQuery_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal