Maison > Article > interface Web > Introduction au framework js chain motion et exemples (code)
Introduction au framework js chain motion et exemples (code)
- 不言original
- 2018-09-01 11:47:311283parcourir
Le contenu de cet article est une introduction (code) sur le framework js chain motion et des exemples. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Les mouvements introduits précédemment sont tous terminés après le déplacement d'un objet. Si un objet bouge, il y a d'autres opérations, comme un p qui devient d'abord plus large, puis plus haut, et enfin devient plus transparent. Le cadre de mouvement ne satisfait pas la situation. Nous pouvons ajouter une fonction fnEnd basée sur le framework de mouvement pour effectuer des opérations une fois le mouvement terminé.
Cadre de mouvement en chaîne
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj, attr, iTarget, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var cur=0;
if(attr==="opacity"){
cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
}
else{
cur=parseInt(getStyle(obj,attr));
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur === iTarget) {
clearInterval(obj.timer);
if(fnEnd)fnEnd();//运动结束后，如果fnEnd参数传递进去了就执行fnEnd函数
} else {
if(attr==="opacity"){
obj.style.filter="alpha(opacity:"+cur+speed+")";
obj.style.opacity=(cur+speed)/100;
}else{
obj.style[attr]=cur+speed+"px";
}
}
}, 30)
}
Exemple de mouvement en chaîne
Nous utilisons le cadre de mouvement en chaîne ci-dessus pour créer un p qui se déplace d'abord pour ajuster la largeur, puis se déplace pour ajuster la hauteur. Le mouvement final ajuste la transparence.
<!DOCTYPE html>
<html>
<head>
<title>链式运动</title>
<script src="move2.js"></script>
<style>
#p1{
width: 100px;
height: 100px;
background: red;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<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",100);
})
})
}
op.onmouseout=function(){
startMove(op,"opacity",30,function(){
startMove(op,"height",100,function(){
startMove(op,"width",100);
})
});
}
}
</script>
</head>
<body>
<p id="p1"></p>
</body>
</html>
Recommandations associées :
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!