JavaScript实现简单的隐藏式侧边栏功能示例
2018-08-31 12:06
951 查看
本文实例讲述了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; /*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;} </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1'); var timer; oDiv.onmouseover=function(){ //startMove(10,0);speed,end startMove(0); //这里稍作优化,原来传入两个参数改为一个参数 }; oDiv.onmouseout=function(){ //startMove(-10,-140); startMove(-140); } function startMove(end){ /*var oDiv=document.getElementById('div1');*/ 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程序设计有所帮助。
您可能感兴趣的文章:
- JavaScript读写二进制数据的方法详解
- JavaScript实现JSON合并操作示例【递归深度合并】
- JavaScript函数、闭包、原型、面向对象学习笔记
- JavaScript使用indexOf()实现数组去重的方法分析
- JavaScript日期工具类DateUtils定义与用法示例
- Reactnative-iOS回调Javascript的方法
- 详解vue-cli 脚手架项目-package.json
- package.json文件配置详解
- 详解Nodejs之npm&package.json
- nodejs npm package.json中文文档
- Package.js 现代化的JavaScript项目make工具
- Javascript 之封装(Package)
相关文章推荐
- JavaScript实现的简单Tab点击切换功能示例
- javascript实现一个简单的隐藏式侧边栏
- javascript实现非常简单的小数取整功能示例
- JavaScript实现的超简单计算器功能示例
- JavaScript基于DOM操作实现简单的数学运算功能示例
- JavaScript简单实现关键字文本搜索高亮显示功能示例
- 原生JavaScript实现的简单省市县三级联动功能示例
- PHP简单实现上一页下一页功能示例
- 纯javascript实现简单下拉刷新功能
- Javascript实现一个简单的页面倒计时功能
- C#摄像头实现拍照功能的简单代码示例
- Angular实现的简单查询天气预报功能示例
- Python3实现的简单验证码识别功能示例
- 用JavaScript实现类似于ListBox功能示例代码
- JavaScript蒙板(model)功能的简单实现代码
- node简单实现一个更改头像功能的示例
- Python3.4编程实现简单抓取爬虫功能示例
- javascript 超简单代码实现图片轮播功能
- jQuery实现简单的下拉菜单导航功能示例
- NodeJS简单实现WebSocket功能示例