js实现右侧的分享效果

Posted 2020-08-07 小极客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

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

以上是关于js实现右侧的分享效果的主要内容，如果未能解决你的问题，请参考以下文章

jQuery右侧滑动快速导航条

关于js----------------分享前端开发常用代码片段

外贸建站之网站导航栏菜单高亮JS实现代码分享

js实现分享图片

Js实现一键分享效果--悬浮框状态