js（匀速运动）“分享到”侧边栏、淡入淡出的效果

一、使一个物体运动到一定位置停止。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            background: green;
            width: 200px;
           height: 200px;
            position: absolute;
            left: 0;
            top:50px;
        }
    </style>
    <script>

        window.onload = function () {
            var oBtn = document.getElementById('btn1');
            var oDiv = document.getElementById('div1');
            var timer = null;
            oBtn.onclick = function () {
              clearInterval(timer);//使一个定时器工作，否则多次点击开始运动多次启动定时器使物体加快运动
              timer = setInterval(function () {
                  var speed = 7;
                  if(oDiv.offsetLeft >= 300){
                      clearInterval(timer);
                  }else {//如果不加else，当到达>=300时，再点击开始运动，物体会执行一次下面代码，物体会运动一下
                      oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                  }

              },30);
            };
        };

    </script>
</head>
<body>
<input id='btn1' type="button" value="开始运动">
<div id="div1">

</div>


</body>
</html>

 二、例子：“分享到”侧边栏，鼠标移动到左侧，弹出分享框.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            background: green;
            width: 150px;
            height: 200px;
            position: absolute;
            left: -150px;
        }
        #div1 span {
            position: absolute;
            top:50px;
            right: -20px;
            width: 20px;
            height: 70px;
            line-height: 20px;
            background: cornflowerblue;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function () {
                startMove(0);
            };
            oDiv.onmouseout = function () {
                startMove(-150);
            };

        };

        var timer = null;
        function startMove(target) {
            var oDiv = document.getElementById('div1');
            clearInterval(timer);
            timer = setInterval(function () {
                var speed = 0;
                if(oDiv.offsetLeft < target){
                    speed = 10;
                }else {
                    speed = -10;
                }

                if(oDiv.offsetLeft == target){
                    clearInterval(timer);
                }else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            },30);
        }


    </script>
</head>
<body>
<div id="div1">
    <span>分享到</span>
</div>


</body>
</html>

效果: 

   

三、淡入淡出的效果：默认透明度为30，鼠标移入渐渐变为100，鼠标移出又变为30.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            filter:alpha(opacity:30);
            opacity:0.3;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function () {
                startMove(100);
            };
            oDiv.onmouseout = function () {
                startMove(30);
            };
        };

        var alpha = 30;
        var timer = null;
        function startMove(target) {
            var oDiv = document.getElementById('div1');
            clearInterval(timer);
            timer = setInterval(function () {
                var speed = 0;
                if(alpha<target){
                    speed = 10;
                }else {
                    speed = -10;
                }
                if(alpha == target){
                    clearInterval(timer);
                }else{
                    alpha += speed;
                    oDiv.style.filter = 'alpha(opacity:'+alpha+')';
                    oDiv.style.opacity = alpha/100;
                }

            },30);
        }
    </script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

 

posted on 2017-05-11 15:27  懂你在爱我  阅读(549)  评论(0)    收藏  举报

导航