使用JavaScript怎么实现一个隐藏式侧边栏功能

爱秀

作者

使用JavaScript怎么实现一个隐藏式侧边栏功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>www.jb51.netjs侧边栏</title>
<styletype="text/css">
*{margin:0;padding:0;}
#div1{width:160px;height:320px;background:#fff;/*border:1pxsolidred;*/position:relative;left:-140px;top:100px;}
#div1.hide{width:140px;height:320px;background:cyan;float:left;position:absolute;left:0;top:0;}
#div1.show{width:17px;height:auto;background:skyblue;border:1pxsolid#000;float:right;position:absolute;top:39%;right:0;}
</style>
<scripttype="text/javascript">
window.onload=function(){
varoDiv=document.getElementById('div1');
vartimer;
oDiv.onmouseover=function(){
//startMove(10,0);speed,end
startMove(0);
//这里稍作优化，原来传入两个参数改为一个参数
};
oDiv.onmouseout=function(){
//startMove(-10,-140);
startMove(-140);
}
functionstartMove(end){
/*varoDiv=document.getElementById('div1');*/
clearInterval(timer);
timer=setInterval(function(){
varspeed=0;
//从-140到0,速度为正，从0到-140，速度为负
if(oDiv.offsetLeft>end){
speed=-10;
}else{
speed=10;
}
if(oDiv.offsetLeft==end){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>
</head>
<body>
<divid="div1">
<divclass="hide">
<ul>
<li>qq</li>
<li>weibo</li>
<li>jb51</li>
</ul>
</div>
<divclass="show">
<span>分享到</span>
</div>
</div>
</body>
</html>

关于使用JavaScript怎么实现一个隐藏式侧边栏功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。

阅读全文

发布于 2021-04-08 13:37:31

javascript

分享空间
分享微博
手机扫一扫

海报

164

上一篇：使用canvas怎么实现一个粒子动画背景下一篇：怎么在webpack4中对SCSS进行处理

推荐阅读