JS展开和收缩效果(二)

正常访问状态！

http://www.guosp.com
碧海澜涛居
海纳百川，有容乃大。壁立千刃，无欲则刚！

关键词：

技术资料 >> 网页特效

搜索标签：暂无标签
JS展开和收缩效果(二)
[阅读次数：4965次] [发布时间：2009年7月4日]
JS展开和收缩效果(二) <html> <head> <title>上下伸展的JS菜单</title> <style type="text/css"> #con div{height:98px; width:50px; margin:0 5px 0 5px;float:left;} </style> </head> <body> <div id="con"> <div style="background-color:red">CSS特效</div> <div style="background-color:green">源码下载</div> <div style="background-color:blue">精品代码</div> <div style="background-color:yellow">源码爱好者</div> <div style="background-color:pink">预留项目</div> <div style="background-color:orange">预留项目</div> <div style="background-color:black">预留项目</div> </div> </body> </html> <script language="javascript"> function $(e){return document.getElementById(e);} function roulMenu(e,maxW,minW){ var divs = $(e).getElementsByTagName('div'); for(var i=0;i<divs.length;i++){ (function(){ var tims,timss; divs[i].onmouseover=function(){ var self = this; clearInterval(timss); tims=setInterval(function(){ if(self.offsetHeight<maxW){ self.style.height = self.offsetHeight + 5 + 'px'; }else{ clearInterval(tims); } },10); } divs[i].onmouseout=function(){ var self = this; clearInterval(tims); timss=setInterval(function(){ if(self.offsetHeight>minW){ self.style.height = self.offsetHeight - 5 + 'px'; }else{ clearInterval(timss); } },10); } })(); } } //使用方法 roulMenu('con',200,100); </script> 注：可手动修改代码后运行！本页地址： [复制地址]
返回顶部

评论统计（0条）| 我要评论

暂无评论内容！

我要评论

我要评论：

带*部分需要填写

姓名称呼：

* 请填写您的姓名或呢称

联系方式：

QQ,MSN,Email都可以，方便交流 (仅管理员可见)

评论内容：

* 不超过100字符，50汉字

验证码：

最近更新

·Host 'XXX' is not allowed...
·Win2008或IIS7的文件上传大...
·IIS7.0上传文件限制的解决方...
·测试信息2015-03-11
·asp.net中处理图片
·ASP.NET之Web打印－终极解决...
·Asp.net下C#调用Word模版实...
·asp.net下将页面内容导入到...
·asp.net导出为pdf文件
·asp.net生成pdf文件
·FCKeditor 文本编辑器的使用...
·ASP.NET 将数据生成PDF
·asp.net2.0导出pdf文件完美...
·AspJpeg的安装与测试
·JS验证浏览器版本对IE11的支...

碧海澜涛居

网站首页｜关于本站｜站长简介｜开发案例｜技术资料｜美文日志｜摄影相册｜读书收藏｜影视收藏｜留言板

免责声明：本站为个人网站，站内所有文字、图片等各类资料均为个人兴趣爱好所收集，不用作任何商业用途，亦不保证资料的真实性，若有因浏览本站内容而导致的各类纠纷，本站也不承担任何责任。本站部分内容来自互联网，如有涉及到您的权益或隐私请联系站长解决。