Maison > Article > interface Web > Mouvement de chaîne en JS (tutoriel détaillé)
Mouvement de chaîne en JS (tutoriel détaillé)
- 亚连original
- 2018-06-09 16:15:391476parcourir
Cet article présente principalement le mouvement en chaîne des effets spéciaux de mouvement JS, et analyse les principes et les techniques spécifiques de mise en œuvre du mouvement en chaîne javascript sous forme d'exemples. Les amis dans le besoin peuvent s'y référer
Les exemples de. cet article décrit le mouvement JS Chain des effets spéciaux de mouvement. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Suivez l'article précédent "Méthodes pour ajouter du mouvement avec n'importe quelle valeur dans les effets spéciaux JS Motion" et continuez à lancer
Chain Motion : Un mouvement après l'autre. Par exemple : lorsque la souris est déplacée sur p, la largeur sera d'abord agrandie, puis la hauteur sera agrandie, puis la transparence sera modifiée, etc. Une série de mouvements sont effectués successivement. Sans plus attendre, passons aux châtaignes ! !
Lorsque la souris se déplace vers p, p devient d'abord plus large, puis devient plus grand, puis change de transparence lorsqu'il est déplacé, il revient à son état d'origine ; par un;
Mise en œuvre la chaîne Pour le mouvement, nous devons continuer à améliorer la fonction startMove() de l'article précédent
function startMove(obj,attr,iTarget,fn) et en passer une de plus Paramètre fn pour indiquer quand un mouvement se termine. Après cela, passez au mouvement suivant. Bien sûr, besoin de juger S'il y a un prochain mouvement, effectuez. le mouvement suivant. Sinon, continuez à effectuer le mouvement suivant
if(fn){
fn();
}Code de test complet :
Partie HTML :
<body> <p id="p1"></p> </body>
Partie css :
<style>
#p1{
width: 200px;height: 200px;
background: green;
}
</style>partie js :
<script>
window.onload = function(){
var op = document.getElementById('p1');
op.onmouseover = function () {
startMove(op,'width',300,function () {
startMove(op,'height',300, function () {
startMove(op,'opacity',30);
});
});
}
op.onmouseout = function () {
startMove(op,'opacity',100, function () {
startMove(op,'height',200, function () {
startMove(op,'width',200);
});
});
}
}
function getStyle(obj,attr){
return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}
function startMove(obj,attr,iTarget,fn) {//fn：执行下一个运动的函数
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var objAttr = 0;
if(attr == "opacity"){
objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
objAttr = parseInt(getStyle(obj,attr));
}
var iSpeed = (iTarget -objAttr)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(objAttr == iTarget){
clearInterval(obj.timer);
if(fn){// 如果传了 “下一个运动的函数” 就执行
fn();
}
}else{
if(attr == "opacity"){
obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
obj.style.opacity = (objAttr+iSpeed)/100;
}else{
obj.style[attr] = objAttr+iSpeed+'px';
}
}
},30);
}
</script>Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.
Articles associés :
Problèmes inter-domaines de ProxyTable dans le projet vue-cli
Serveur de requêtes de builds express
Utilisez la fonction de découpage personnalisée de js pour supprimer les espaces aux deux extrémités
Principe d'exécution de JavaScript
Explication détaillée de l'utilisation de Jest pour tester le composant natif de réaction
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!