js实现右侧的分享效果

就是当鼠标移到上面的时候，他会出现，鼠标移出就消失。

nmouseover和nmouseout就能实现

<style>
*{padding:0;margin:0;}
    #s1{width:200px ;
            background:red;
             height:200px;
            position:absolute;
            top:50px;
            left:-200px;
            cursor:pointer;}
    #s1 span
{display:block;height:80px;width:20px;left:200px;background:blue;position:absolute;left:200px;top:50px;}
}
</style>

<body>
<div id="s1">
    <span>分享到</span>
</div>    
</body>

js代码如下

<script>
    window.onload=function()
    {
       var div1=document.getElementById("s1");  
       var span1=s1.getElementsByTagName("span")[0];   

       div1.onmouseover=function()
       {
        startMove(0);
       }
       div1.onmouseout=function()
       {
        startMove(-200);
       }
   };
    var timer=null;
    function startMove(ti)
    {
         var div1=document.getElementById("s1");
         clearInterval(timer);
         timer=setInterval(function()
            {
                var speed=null;
                if (div1.offsetLeft>ti)  //先判断他的速度是正的还是负的，如果offsetLeft大于0，速度为负
                {
                    speed=-10;
                }
                else   //否则速度为正，显示div要出来
                {
                    speed=10;
                }

                if (div1.offsetLeft==ti)  //相等，停止运动
                {
                    clearInterval(timer);
                }
                else  //不相等，做匀速运动
                {
                    div1.style.left=div1.offsetLeft+speed+'px';
                }
            },30);
    }
</script>

其实特别简单，只要收敲敲就会，

posted @ 2016-09-07 17:52  MrPat  阅读(752)  评论(0)  编辑  收藏  举报