侧边栏原理

最新推荐文章于 2022-02-22 13:06:54 发布

诸葛苍穹

最新推荐文章于 2022-02-22 13:06:54 发布

阅读量566

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/u012260672/article/details/50570500

版权

javaScript 专栏收录该内容

131 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
window.onload = function()
{
var oSide = document.getElementById('side');
    oSide.onmousemove = function()
   {
    leftMove();
   }
   oSide.onmouseout= function()
   {
       rightMove();
   }
}


var timer = null;
//鼠标移入的时候
function leftMove()
{
    var oSide = document.getElementById('side');
    clearInterval(timer);
    timer = setInterval(function()
    {
        var spends = 10;
        if(oSide.offsetLeft == 0)
        {
            clearInterval(timer);
        }else{
        oSide.style.left = oSide.offsetLeft + spends +'px';
        }
    },30);
}
//鼠标离开的时候
function rightMove()
{
    var oSide = document.getElementById('side');
    clearInterval(timer);//先清空定时器
    timer = setInterval(function()
    {
        var spends = -10;//设置移动的速度
        if(oSide.offsetLeft == -150)//设置样式本身的left如果是-150的时候说明隐藏掉了
        {
            clearInterval(timer);//当隐藏了就关闭定时器
        }else{
        oSide.style.left = oSide.offsetLeft + spends +'px';
        }
    },30);
}



</script>

</head>

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

诸葛苍穹

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
侧边栏原理

<script type="text/javascript">window.onload = function(){var oSide = document.getElementById('side'); oSide.onmousemove = function() { leftMove(); } oSide.onmouseout= function()
复制链接

扫一扫