Implémentation JavaScript d'un exemple de code d'effet de gigue de fenêtre

L'effet de gigue est souvent rencontré sur toutes les principales pages Web. Cet article présente principalement les informations pertinentes sur JavaScript pour obtenir l'effet de gigue de fenêtre. C'est très bien et a une valeur de référence. peut s'y référer.

Introduction au principe

La gigue est en fait une forme particulière de mouvement alternatif, mais le mouvement alternatif. est un mouvement infini sans friction et basé sur la vitesse ; tandis que la gigue utilise la position comme référence et s'arrête finalement au point de départ

L'un des effets de gigue les plus courants sur les pages Web devrait être l'invite de gigue de la fenêtre

À partir du point de départ, l'élément de gigue se déplace d'abord vers la droite de la distance maximale len, puis se déplace vers la position symétrique à gauche, puis se déplace sur une distance légèrement inférieure ; vers la droite, puis se déplace vers la position symétrique à gauche ; dans cette boucle, le dernier élément s'arrête au point de départ

Implémentation du code

Le tramage dans l'implémentation du code n'est rien de plus que Grâce à la minuterie, laissez la valeur gauche ou supérieure changer à intervalles réguliers

Dans l'implémentation du mouvement, il existe deux idées pour le changement de distance

Idée 1

p.style.left = p.offsetLeft + value;

Obtenez le style actuel de l'élément à chaque fois, puis calculez-le avec la valeur modifiée

Idée 2

left = p.offsetLeft;
......
p.style.left = left + value;

Avant le démarrage du minuteur, récupérez le style initial de l'élément, puis calculez-le avec la valeur modifiée

Du point de vue de l'implémentation de la gigue , utilisez la deuxième méthode pour changer complètement la distance. Il est plus simple de laisser la valeur changer pour implémenter

Par conséquent, la clé de l'implémentation du code est de comprendre comment la valeur change

Supposons que le la distance la plus éloignée est la cible cible, et l'intervalle de distance dans la même direction est le pas de la taille du pas. Si elle est exprimée de manière plus intuitive avec des nombres, la valeur de value est similaire à 4, -4, 2, -2, 0. Par conséquent, un répertoire variable est nécessaire pour contrôler la direction de démarrage de la secousse. Le répertoire doit être modifié à chaque fois que la minuterie se déplace

//定时器开启前的变量声明
dir = 1;
step = 0;
left = p.offsetLeft
//定时器里面的代码
value = dir*(target - step);
if(step >= target){
step = target
}
p.style.left = left + value + 'px';
if(dir === -1){
step++; 
}
dir = -dir;

Encapsulez l'effet de secousse sous shakeMove.js

function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
} 
function shakeMove(json){
//声明要进行抖动的元素
var obj = json.obj;
//声明元素抖动的最远距离
var target = json.target;
//默认值为20
target = Number(target) || 20;
//声明元素的变化样式
var attr = json.attr;
//默认为'left' 
attr = attr || 'left'; 
//声明元素的起始抖动方向
var dir = json.dir;
//默认为'1'，表示开始先向右抖动
dir = Number(dir) || '1';
//声明元素每次抖动的变化幅度
var stepValue = json.stepValue;
stepValue = Number(stepValue) || 2;
//声明回调函数 
var fn = json.fn;
//声明步长step
var step = 0;
//保存样式初始值
var attrValue = parseFloat(getCSS(obj,attr));
//声明参照值value
var value;
//清除定时器
if(obj.timer){return;}
//开启定时器
obj.timer = setInterval(function(){
//抖动核心代码
value = dir*(target - step);
//当步长值大于等于最大距离值target时
if(step >= target){
step = target
}
//更新样式值
obj.style[attr] = attrValue + value + 'px';
//当元素到达起始点时，停止定时器
if(step == target){
clearInterval(obj.timer);
obj.timer = 0;
//设置回调函数
fn && fn.call(obj); 
} 
//如果此时为反向运动，则步长值变化
if(dir === -1){
step = step + stepValue; 
}
//改变方向
dir = -dir; 
},50); 
}

Exemple d'application

Ce qui suit utilise le shakeMove encapsulé pour implémenter quelques applications d'agitation simples

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!