未分类

JavaScript实现简单的隐藏式侧边栏功能示例_javascript技巧_脚本之家

30 3月 , 2020  

正文实例呈报了JavaScript完结轻松的隐敝式侧面栏功效。分享给大家供大家仿照效法,具体如下:

JavaScript实现简单的隐藏式侧边栏功能示例_javascript技巧_脚本之家。可望本文所述对大家JavaScript程序设计有着帮衬。

越来越多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript事件有关操作与本事大全》、《JavaScript页面成分操作技术计算》、《JavaScript操作DOM手艺总括》、《JavaScript查找算法手艺计算》、《JavaScript数据布局与算法本事总计》、《JavaScript遍历算法与本领总括》及《JavaScript错误与调治技能总括》

www.jb51.net js侧边栏*{margin: 0;padding: 0;}#div1{width: 160px; height: 320px; background: #fff; /*border: 1px solid red;*/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;}window.onload=function(){var oDiv=document.getElementById;var timer;oDiv.onmouseover=function;speed,endstartMove;//这里稍作优化,原来传入两个参数改为一个参数};oDiv.onmouseout=function(){//startMove;startMove;}function startMove{/*var oDiv=document.getElementById;*/clearInterval;timer=setInterval{var speed=0;//从-140到0,速度为正,从0到-140,速度为负if{speed=-10;}else{speed=10;}if{clearInterval;}else{oDiv.style.left=oDiv.offsetLeft+speed+'px';}},30);}}qqweibojb51分享到

此间运用在线HTML/CSS/JavaScript代码运维工具

周边的掩瞒式侧边栏,如分享、联系客服等。通过设置速度来贯彻滑入滑出的动态效果


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图