仿QQ空间分享—变速运动

废话不多说,直接上效果图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            height: 200px;
            width: 200px;
            position: relative;
            left: -200px;
            background-color: #6effcd;
            margin-top: 50px;
        }
        #btn{
            height: 90px;
            width: 30px;
            position: absolute;
            left: 200px;
            top: 65px;
            background-color: #73eeff;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
  <div id="container">
      <span id="btn">点击展开</span>
  </div>

    <script>
        window.onload = function(){
        var container=document.getElementById('container');
        var btn=document.getElementById('btn');
        btn.onclick = function(){
            if(container.offsetLeft==0)
            {
                moveStart(-200);
                btn.innerHTML='点击展开'
            }
            else{
                moveStart(0);
                btn.innerHTML='点击收缩'
            }
        };
        };
        var timer = null;
        function moveStart(Target)
        {
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=(Target-container.offsetLeft)/5;
               speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(container.offsetLeft==Target)
                {
                    clearInterval(timer);
                }
                else{
                    container.style.left=container.offsetLeft+speed+'px';
                }
            },30)
        }

    </script>
</body>
</html>
最后修改:1周前 2018-06-08
如果觉得我的文章对你有用,请随意赞赏

共有 0 条评论