js鍊式運動框架與實例的介紹（程式碼）
- 不言原創
- 2018-09-01 11:47:311305瀏覽
這篇文章帶給大家的內容是關於js鍊式運動框架與實例的介紹（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
前面介紹的運動都是一個物體運動之後就結束了，如果一個物體運動之後，還有其他的操作，比如一個p先變寬，然後變高、最後變透明度，我們前面的運動框架就不滿足情況了。我們可以在運動框架的基礎上，在加上一個fnEnd函數，當運動執行完成之後執行的操作。
鍊式運動框架
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)
}
鍊式運動範例
我們用上面的鍊式運動框架做一個p先運動調整寬度，再運動調整高度，最後運動調整透明度。
<!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>
相關推薦：
JavaScript運動框架之鍊式運動到完美運動的範例程式碼（五）
javascript 支援鏈式呼叫的非同步呼叫框架Async.Operation_javascript技巧
#以上是js鍊式運動框架與實例的介紹（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn