Javascript實現動畫效果

helloworlddm發表於2017-12-30
JavaScript動畫

HTML程式碼

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>移動事件應用</title>

        <style>
            body{
                background:pink
            }
            #picAll{
                width:100px;
                height:100px;
                overflow:hidden;
                position:relative
            }
        </style>
        <script src="js/addLoadEvent.js"></script>
        <script src="js/move.js"></script>
    </head>
    <body>
        <h1>Dota中各個版本的地圖</h1>
        <ol id="links">
            <li>
                <a href="1.html">Dota第一個版本</a>
            </li>
            <li>
                <a href="2.html">Dota第二個版本</a>
            </li>
            <li>
                <a href="3.html">Dota第三個版本</a>
            </li>
            <li>
                <a href="4.html">Dota第四個版本</a>
            </li>
        </ol>
        <div id="picAll">
            <img src="images/hb.jpg" alt="Dota各個版本的圖片" id="img0"/>
        </div>
        <script type="text/javascript">
            function showpic(){
                //var picShows = document.getElementById("pic")
                var imgf = document.getElementById("img0");
                imgf.style.position = "absolute";
                imgf.style.left = "0px";
                imgf.style.top = "0px";

                var linkss = document.getElementById("links");
                var aa = linkss.getElementsByTagName("a");
                aa[0].onmouseover = function(){

                    movement("img0",0,0,10);
                }
                aa[1].onmouseover = function(){
                    movement("img0",-100,0,10);

                }
                aa[2].onmouseover = function(){
                    movement("img0",-200,0,10);

                }   
                aa[3].onmouseover = function(){
                    movement("img0",-300,0,10);

                }

            }
            addLoadEvent(showpic);
        </script>
    </body>
</html>

js程式碼：（move.js）

function movement(eleId,pos_x,pos_y,interval){
    var ele = document.getElementById(eleId);
    var start_x = parseInt(ele.style.left);
    var start_y = parseInt(ele.style.top);
    var dist = 0;
    if (ele.mov){
        clearTimeout(ele.mov);//這裡和重要的，佛祖額會出現卡頓現象，佇列堆積所致
    }
    if (start_x == pos_x && start_y == pos_y){
        return true;
    }
    if (start_x < pos_x)
    {
        dist = Math.ceil((pos_x-start_x)/10);
        start_x += dist;
    }
    if (start_y < pos_y){

        dist = Math.ceil((pos_y-start_y)/10);
        start_y += dist;
    }
    if (start_x > pos_x){
        dist = Math.ceil((start_x-pos_x)/10);
        start_x -= dist;

    }
    if (start_y > pos_y){
        dist = Math.ceil((start_y-pos_y)/10);
        start_y -= dist;
    }
    ele.style.left = start_x+"px";
    ele.style.top = start_y+"px";
    //var moveStr = "movement("+ele+","+pos_x+","+pos_y+","+interval+")";
    var moveStr = "movement('"+eleId+"',"+pos_x+","+pos_y+","+interval+")"; 
    ele.mov = setTimeout(moveStr,interval);
}

js程式碼（addLoadEvent.js）

function addLoadEvent(fun){
    var oldfun = window.onload;
    if (typeof window.onload != 'function'){
        window.onload = fun;
    }else{
        window.onload = function(){
            oldfun();
            fun();

        }
    }



}

執行結果：
這裡寫圖片描述

相關文章