1. 程式人生 > >js&jQuery實現動畫移動

js&jQuery實現動畫移動

沒次用到都要自己手寫,相當麻煩,於是找時間把它羅列了一下。實現簡單的按鈕點選事件,然後 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結束
}