分享到的写法 | 易学教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        *{
            padding: 0;
            margin:0;
        }  

        div{
            position: absolute;
            left: -100px;
            top:0;
            width: 100px;
            height: 200px;
            background-color: pink;
        }

        div span {
            position: absolute;
            left: 100px;
            top:50%;
            transform:translateY(-50%);
            width:20px;
            box-sizing: border-box;
            background-color: #ccc;
            /*  字体水平居中 */
            text-align: center;
            
         }  
    </style>

    <script text="text/javascript">
    
        function move(obj,target){
          clearInterval(obj.timer);
          // 计算速度
          // 判断条件的问题， 估计是 -10 也是  true?
        //   var speed = (target-obj.offsetLeft)?7:-7;
          var speed = 0;
          if(obj.offsetLeft<target){
            speed = 10;
          }else{
            speed = -10;
          }
           obj.timer = setInterval(function(){

                if(Math.abs(target- obj.offsetLeft) <Math.abs(speed)){
                    clearInterval(obj.timer);
                    obj.style.left = target + "px";
                }else{
                    obj.style.left = obj.offsetLeft + speed + 'px';
                }
              
           },30); 

        }

        window.onload = function(){
            var iShare = document.getElementById('share');
            var oBox = document.getElementById('box');
            oBox.onmouseover = iShare.οnmοuseοver=function () {
                    move(oBox,0);
            }

            oBox.onmouseout = iShare.onmouseout = function () {
                move(oBox,-100);
            }

        }
    </script>
</head>
<body>
    
    <div id="box">
        <span id="share">分享到</span>
    </div>

    <!--  非常简单，当我们hover的时候，让div left 从 0 到 -100 -->
    <!--  否则的话，从 -100 到0  -->

  

</body>
</html>

上面的功能很简单，无非就是匀速运动的使用，不过我还是写错了！

上面注释掉的代码有问题

var speed = (obj.offsetLeft<target) ? 10:-10;

这样可以，上面的注释掉的就不行，因为负数作为判断条件也为真！

来源：CSDN

作者：爱生活，爱编程

链接：https://blog.csdn.net/qq_15009739/article/details/103753296

标签

speed