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

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

以下是代码

！DOCTYPE html html hearteta charset=' utf-8 '/title www .jb51。net js侧边栏/title style type=' text/CSS ' * { margin : 0；padd : 0；} # div 1 { width : 160 pxh three : 320 px背景# fff/*border: 1px纯红；*/position:相对；左侧：-140像素；top:100px}#div1 .隐藏{宽度： 140像素重量： 320像素背景：青色；向左浮动：绝对位置：左： 0；top : 0；}#div1 .显示{ width: 17pxheight: auto背景skyblueborder: 1px固体# 000;向右浮动：绝对位置：前：名39%；右： 0；}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；定义变量计时器；奥迪夫。onmouseover=function(){//startMove(10，0)；速度，endstartMove(0)；//这里稍作优化，原来传入两个参数改为一个参数};奥迪夫。onmouseout=function(){//startMove(-10，-140)；startMove(-140)；}函数start move(end){/* var oDiv=document。getelementbyid(' div 1 ')；*/clearInterval(计时器);timer=setInterval(function(){ var speed=0；//从-140到0,速度为正，从0到-140,速度为负if(OdiV。offsetLefTend){ speed=-10；} else { speed=10} if(odiv。offsetleft==end){ clearInterval(计时器);} else { Odiv。风格。左=Odiv。偏移速度“px”；}},30);} }/脚本/标题dydiv id=' div 1 ' div class=' hide ' ulli QQ/Lili Weibo/Lilijb 51/Li/ul/div class=' show ' span分享到/span/div/div/body/html这里使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试效果如下：

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

希望本文所述对大家Java脚本语言程序设计有所帮助。