侧边栏滑动效果

最新推荐文章于 2022-04-21 10:32:55 发布

画意桥边

最新推荐文章于 2022-04-21 10:32:55 发布

阅读量1k

点赞数 2

分类专栏： CSS JavaScript

本文链接：https://blog.csdn.net/yerongtao/article/details/69525885

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 2 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侧边栏滑动效果</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #oLeft{
            width:200px;
            height:550px;
            background-color: #ccc;
            left: -200px;
            position:relative;
        }
        #oLeft div p{
            text-align: center;
            font-size:20px;
        }
        #ibtn{
            position: absolute;
            width:30px;
            height:60px;
            background-color: #a00;
            color:#fff;
            line-height: 30px;
            top: 245px;
            left:200px;
            border-radius:0 5px 5px 0;
            text-align: center;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oLeft = document.getElementById('oLeft');
            oLeft.onmouseover = function(){
                startMove(0);
            }
            oLeft.onmouseout = function(){
                startMove(-200);
            }
        }
        var timer = null;
        function startMove(iTarget){
            clearInterval(timer);  //先清除定时器，防止鼠标滑过重复触发
            var oLeft = document.getElementById('oLeft');
            timer = setInterval(function(){
                var speed = 0;
                if(oLeft.offsetLeft>iTarget){
                    speed = -10;
                }else{
                    speed = 10;
                }
                if(oLeft.offsetLeft == iTarget){
                    clearInterval(timer);
                }else{
                    oLeft.style.left = oLeft.offsetLeft + speed +'px';
                }
            },30)
        }
    </script>
</head>
<body>
<div id="oLeft">
    <div>
        <p>侧边栏</p>
        <p>侧边栏</p>
        <p>侧边栏</p>
    </div>
    <div id="ibtn">
        <p>分享</p>
    </div>
</div>
</body>
</html>