侧边栏滑动效果

来源：互联网发布：java json解析map对象编辑：程序博客网时间：2024/04/30 00:51
<!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>
0 0