java侧边栏_[Java教程]js实现的侧边栏展开收缩效果

[Java教程]js实现的侧边栏展开收缩效果

0 2016-02-12 16:00:09

js实现的侧边栏展开收缩效果:

在很多应用中，尤其是客服系统一般具有这样的效果，那就是默认状态下，会折叠在网页的一侧，当鼠标悬浮的时候会展开，下面就通过代码实例，介绍一下如何使用原生javascript实现此功能。

更多的javascript特效可以浏览特效代码下载版块。

代码如下:

蚂蚁部落

以上代码实现了我们的要求，鼠标悬浮于侧边栏可以实现展开，离开实现收缩功能，下面介绍一下实现过程。

一.代码注释:

1.window.οnlοad=function(){}，文档结构内容完全加载完毕再去执行函数中的代码。

2.var odiv=document.getElementById('thediv')，获取指定元素对象。

3.odiv.οnmοuseοver=function (){startmove(0,10);}，为odiv对象注册onmouseover事件处理函数。

4.odiv.οnmοuseοut=function (){startmove(-150,-10);}，为odiv对象注册onmouseout事件处理函数。

5.var timer=null，声明一个timer作为定时器函数的标识。

6.function startmove(target,speed){}此函数是展开和折叠的核心函数，第一个参数是left的目标值，speed是速度。

7. var odiv=document.getElementById('thediv')，获取元素对象。

8.clearInterval(timer)，停止前一个定时器函数的执行，可以防止多个定时器函数同时执行造成干扰。

9.timer=setInterval(function (){},30)，每隔30毫秒执行一次函数。

10.if(odiv.offsetLeft==target){clearInterval(timer);}，如果div元素距离body左边缘等于规定的尺寸，就停止定时器函数。

11.else{odiv.style.left=odiv.offsetLeft+speed+'px';}，否则继续设置left属性值。

二.相关阅读:

1.onmouseover事件可以参阅javascript的onmouseover事件一章节。

2.onmouseout事件可以参阅javascript的onmouseout事件详解一章节。

3.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。

4.setInterval()函数可以参阅setInterval()函数用法详解一章节。

5.offsetLeft属性可以参阅js的offsetTop好offsetLeft属性用法详解一章节。

java侧边栏_[Java教程]js实现的侧边栏展开收缩效果相关推荐

html实现文字隐藏展开特效代码,js实现点击展开隐藏效果（实例代码）
js实现点击展开隐藏效果(实例代码) 发布时间:2020-09-20 10:47:49 来源:脚本之家阅读:69 作者:laozhang 本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码 ...
js字符串如何拼接java代码_[Java教程]js拼接字符串传值，子窗口传值
[Java教程]js拼接字符串传值,子窗口传值 0 2015-10-26 21:00:15 避免下次再去查资料,记录一下 1.拼接字符串传值 "UpdateState?ids=" ...
Java折叠_[Java教程]Jquery中菜单的展开和折叠
[Java教程]Jquery中菜单的展开和折叠 0 2018-08-15 16:03:38 标签内容您好:alee 宿舍管理员密码管理修改密码宿舍管理学生宿舍查询学生宿舍新增学生宿舍分配 ...
ie8不兼容java项目_[Java教程]ie8以下不兼容document.getElementsByName解决方法
[Java教程]ie8以下不兼容document.getElementsByName解决方法 0 2016-09-13 19:00:06 在IE8以认为只有文本标签才有name属性的,一些元素标签用d ...
java获取焦点_[Java教程]dialog获取焦点
[Java教程]dialog获取焦点 0 2014-09-25 18:00:41 弹出层是一个iframe openWindow: function (options) { var url = opt ...
java 电子相册_[Java教程]电子相册特效
[Java教程]电子相册特效 0 2015-05-17 20:00:20 引言初入前端这行不久,对很多东西还是很陌生,页面布局.合理使用Html标签.CSS属性.js书写习惯等等还都不是很熟悉,所以 ...
jsp java 后台_[Java教程]用JSP做后台管理系统
[Java教程]用JSP做后台管理系统 0 2015-10-13 23:00:25 突然很开心,紧张了好几天的项目终于不那么赶了. 我是一个比别人慢半拍的人,所以一定要比别人多付出一点努力. 今天在进 ...
java心电图_使用原生js+canvas实现模拟心电图
从2016年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
java 矢量_[Java教程]矢量图标的使用
[Java教程]矢量图标的使用 0 2015-11-20 14:00:42 前几年已经开始流行icon font,很多项目为了节省网站空间,实现开发时灵活的图标大小和颜色等样式修改都已经采用icon ...

java侧边栏_[Java教程]js实现的侧边栏展开收缩效果

java侧边栏_[Java教程]js实现的侧边栏展开收缩效果相关推荐

最新文章

热门文章