首頁 > 文章 > web前端 > 前端實作--JavaScript--動畫（三）

前端實作--JavaScript--動畫（三）

黄舟原創: 2016-12-30 16:30:35893瀏覽

實現效果：當滑鼠移動上去時，DIV逐漸變慢的移除；當滑鼠離開時，又逐漸變慢的恢復原位置。

程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>缓冲动画</title>
    <style type="text/css">
        body,div,span{
            margin:0;
            padding;
        }
        #div1{
            width:200px;
            height:200px;
            background:red;
            position:relative;
            left:-200px;
            top:0;  
        }
        #div1 span{
            width:20px;
            height:50px;
            background:blue;
            position:absolute;
            left:200px;
            top:75px;
        }
    </style>
    <script>            
        window.onload = function(){
            var oDiv = document.getElementById(&#39;div1&#39;);
            oDiv.onmouseover = function(){
                startMove(0);
            }
            oDiv.onmouseout = function(){
                startMove(-200);
            }
        }
        var timer = null;
        // 参数iTarget，设置DIV移动的边界。
        // 取消由 setInterval()设置的每一次触发鼠标事件。
        // 设置DIV的运动。        
        function startMove(iTarget){
            clearInterval(timer);
            var oDiv = document.getElementById(&#39;div1&#39;);
            timer = setInterval(function(){
                var speed = (iTarget - oDiv.offsetLeft)/20;
                speed = speed > 0?Math.ceil(speed):Math.floor(speed);
                if(oDiv.offsetLeft == iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.left = oDiv.offsetLeft+speed+&#39;px&#39;;
                }                           
            },30)
        }
    </script>
</head>

<body>
    <div id="div1"> 
        <span id="share">分享</span>
    </div>
</body> 
</html>

以上就是前端實踐--JavaScript--動畫（三）的內容，更多相關內容請關注PHP中文網（www.php.cn）！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：前端實作--JavaScript--動畫（二）下一篇：前端實作--JavaScript--動畫（二）

看更多

前端實作--JavaScript--動畫（三）

相關文章