JavaScript实现简单的隐藏式侧边栏功能示例

时间：2021-05-26

本文实例讲述了JavaScript实现简单的隐藏式侧边栏功能。分享给大家供大家参考，具体如下：

常见的隐藏式侧边栏，如分享、联系客服等。通过设置速度来实现滑入滑出的动态效果

以下是代码

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>www.jb51.net js侧边栏</title><style type="text/css">*{margin: 0;padding: 0;}#div1{width: 160px; height: 320px; background: #fff; 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: 1px solid #000;float: right; position: absolute; top: 39%;right: 0;}</style><script type="text/javascript">window.onload=function(){var oDiv=document.getElementById('div1');var timer;oDiv.onmouseover=function(){//startMove(10,0);speed,endstartMove(0);//这里稍作优化，原来传入两个参数改为一个参数};oDiv.onmouseout=function(){//startMove(-10,-140);startMove(-140);}function startMove(end){clearInterval(timer);timer=setInterval(function(){var speed=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><div id="div1"><div class="hide"><ul><li>qq</li><li>weibo</li><li>jb51</li></ul></div><div class="show"><span>分享到</span></div></div></body></html>

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试效果如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章