首頁手記 JavaScript動畫之緩沖動畫

JavaScript動畫之緩沖動畫

標簽：

Html/CSS JavaScript

窗口弹出时会做一个类似列车进站的减速缓冲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
<!--    <link rel="stylesheet" type="text/css" href="../css/demo3.css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/demo3.js"></script> -->
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 300px;
            background-color: #abb88e;
            position: relative;
            left: -200px;

        }
        #share{
            width: 50px;
            height: 100px;
            background-color: #69c;
            position: absolute;
            right: -50px;
            top: 50px;
            font-size: 25px;
            line-height: 50px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var box = document.getElementById('box');
            box.onmouseover=function(){
                startMove(0);
            };
            box.onmouseout=function(){
                startMove(-200);
            };
        };
        var timer = null;
        function startMove(oTarget){
            var box = document.getElementById('box');

            clearInterval(timer);
            timer = setInterval(function(){
                var flag = oTarget - box.offsetLeft;
                var speed = 0;
                if(flag>0){
                    speed=Math.ceil(flag/20);
                }else if(flag<0){
                    speed=Math.floor(flag/20);
                }
                box.style.left = box.offsetLeft + speed + "px";
                if(box.offsetLeft===oTarget){
                    clearInterval(timer);
                }
            },30);
        }
    </script>
</head>
<body>
    <div id="box">
        <div id="share">分<br>享</div>
    </div>
</body>
</html>

點擊查看更多內容