Heim > Artikel > Web-Frontend > Front-End-Praxis – JavaScript – Animation (3)

Front-End-Praxis – JavaScript – Animation (3)

黄舟Original: 2016-12-30 16:30:35894Durchsuche

Erfolgseffekt: Wenn sich die Maus nach oben bewegt, wird der DIV langsam entfernt, wenn die Maus ihn verlässt, wird er allmählich in die ursprüngliche Position zurückversetzt.

Code:

<!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>

Das Obige ist der Inhalt der Front-End-Übung – JavaScript – Animation (3). Bitte achten Sie auf PHP Chinese Net (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Front-End-Praxis – JavaScript – Animation (2)Nächster Artikel：Front-End-Praxis – JavaScript – Animation (2)

In Verbindung stehende Artikel

Mehr sehen