js&jQuery實現動畫移動
阿新 • • 發佈:2018-12-18
沒次用到都要自己手寫,相當麻煩,於是找時間把它羅列了一下。實現簡單的按鈕點選事件,然後 div
移動相應的畫素。
其中包括js的快速移動、勻速移動、先快後慢移動。然後實現jQuery的定時移動
都採用了定時器,jQuery採用了animate()方法
/*ele表示指定的元素,target表示移動的距離*/ //快速移動指定距離,沒有效果 window.onload=function () { /*首先採用js來實現*/ /* var box = document.getElementById("box"); document.getElementById("btn1").onclick=function (ev) { animate3(box,200); } document.getElementById("btn2").onclick=function (ev) { animate3(box,-200); } */ function animate1(ele, target) { clearInterval(ele.timer); ele.timer = setInterval(function () { ele.style.left = ele.offsetLeft + target + "px"; clearInterval(ele.timer); }, 30); } //均勻移動指定距離 function animate2(ele, target) { var leader = target + ele.offsetLeft; var move = target > 0 ? 10 : -10; clearInterval(ele.timer); ele.timer = setInterval(function () { ele.style.left = ele.offsetLeft + move + "px"; if (Math.abs(leader - ele.offsetLeft) < Math.abs(move)) { ele.style.left = leader + "px"; clearInterval(ele.timer); } }, 30); } //先快後慢移動指定距離 function animate3(ele, target) { var leader = ele.offsetLeft + target; clearInterval(ele.timer); ele.timer = setInterval(function () { var move = (leader - ele.offsetLeft) / 10; if (Math.abs(leader - ele.offsetLeft )<=10) { ele.style.left = leader+"px"; clearInterval(ele.timer); }else{ ele.style.left = ele.offsetLeft + move + "px"; } }, 30); } //採用jQuery的語法來實現移動 $("#btn1").click(function(){ $animate($(this),200); }); $("#btn2").click(function(){ $animate($(this),-200); }); function $animate(ele,target) { if(target>=0){ $("#box").animate({left:"+="+target+"px"},300); }else{ $("#box").animate({left:"-="+target+"px"},300); } } //window.onload結束 }