Home > Article > Web Front-end > Introduction to js chain motion framework and examples (code)
Introduction to js chain motion framework and examples (code)
- 不言Original
- 2018-09-01 11:47:311283browse
This article brings you an introduction (code) about the js chain motion framework and examples. It has a certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
The movements introduced before are all finished after an object moves. If an object moves, there are other operations, such as a p that first becomes wider, then becomes taller, and finally becomes more transparent. What we did earlier The motion frame does not satisfy the situation. We can add a fnEnd function based on the motion framework to perform operations after the motion is completed.
Chain motion frame
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)
}
Chain motion example
We use the above chain motion frame to make a p that first moves to adjust the width, then moves to adjust the height, and finally moves Adjust transparency.
<!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>
Related recommendations:
JavaScript motion framework chain motion to perfect motion sample code (5)
The above is the detailed content of Introduction to js chain motion framework and examples (code). For more information, please follow other related articles on the PHP Chinese website!