javascript控制DIV打开关闭添加事件
作者：Davidszhou 来源:SEO优化博客 时间:2015-04-21 23:43:05 点击：今天分享一个利用Javascript控制一个层DIV的关闭和打开，一般这个用在页面的浮动在线客服比较多。
先贴上全文代码如下：
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>企业网站建设_SEO优化_davidszhou</title> <style> #outlook { width:280px; height:100px; border:1px solid #000; position:fixed; top:200px; left:30px;} /*演示的DIV定义一个CSS样式。宽280px;高100px;给了边框border,并且给了固定定位，距离顶部200PX;距离左边30PX;*/ </style> </head> <body> <script> function downClik(){ var a =document.getElementById('outlook'); /*获取要改变DIV的选择符*/ a.style.width="25px"; /*定义它的宽为25px*/ } function upClik(){ var a =document.getElementById('outlook'); /*获取要改变DIV的选择符*/ a.style.width="280px"; /*改变它的宽为280px;*/ } </script> <div id="outlook"> <p><span onmousedown="downClik();">打开</span><span onmouseup="upClik();">关闭</span></p>/*给两个span添加onmousedown与onmouseup事件*/ </div> </body> </html> |
这里主要是用到了JavaScript的onmousedown和onmouseup两个事件，结合JavaScript给DIV相应的属性，获得最终效果。具体说明已经在代码后方说明。
JavaScript设计思想：点击关闭，改变应用DIV的宽度为最小宽度，或者高度，因为最小时也应该有个打开按钮，如不需要打开按钮，可以设置属性为：display:none;，点击打开，让他宽度或者高度恢复原值。
如果一个DIV“a”里面包含一个DIV"b"，点击关闭，让div“b”改变属性，应获取DIV“b”的选择符。
TAGS:javascript
来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/40.html转载请标注此链接
- 上一篇：企业网站制作超简单教程第二篇：页面布局实战
- 下一篇：纯CSS制作页面导航下拉菜单
- 七日热点
- 热力推荐
- TAGS 列表
- 网站统计
- 文章总数：138
- 今天发布：0
- 软件资源数：20
- 友情连接：()
Davids zhou | 站点地图 | | | 皖ICP备14017762号 如有侵犯您权利点击上面QQ -Powered By 帝国CMS -davids.zhou#qq.com(#换@)
Davidszhou个人博客主要记录在网站建设、SEO优化、python开发、PHP开发中遇到问题记录保存，作为他人参考学习教程
