JS侧边栏的显示和消失

最新推荐文章于 2021-04-18 01:28:17 发布

杨亚仑

最新推荐文章于 2021-04-18 01:28:17 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/yangyalun/article/details/79868791

版权

JavaScript学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 200px;
            height: 250px;
            background: rebeccapurple;
            position: absolute;
            left: -200px;
        }
        #div1 span{
            width: 20px;
            position: absolute;
            background: red;
            top: 80px;
            right: -20px;
            color: white;
        }
    </style>
    <script>
        window.onload=function () {
            var oDiv = document.getElementById("div1");
            oDiv.onmouseover=function () {
                move(0,10);
            }
            oDiv.onmouseout=function () {
                move(-200,-10);
            }
        }
        var timer=null;
        function  move(target,speed) {
            var oDiv = document.getElementById("div1");
            clearInterval(timer);
            timer=setInterval(function () {
                if(oDiv.offsetLeft==target)
                {
                    clearInterval(timer);
                }
                else
                {
                    oDiv.style.left=oDiv.offsetLeft+speed+'px';
                }
            },30)
        }
    </script>
</head>
<body>
<div id="div1">
    <span id="span1">分享到</span>
</div>
</body>
</html>

杨亚仑

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS侧边栏的显示和消失

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; #div1{ width:
复制链接

扫一扫