滑动门,简洁,新手上路制作篇 (小鸽子系列)

所属分类：网络编程 / JavaScript 阅读数： 1444

收藏 0赞 0分享

以前回复过几个朋友,关于滑动门的代码,那时我还没有用上IE7,FF,结果,发现只能在IE6下运行,代码也很长;今天又有朋友问我这个,我只好花一点时间,终于把这个东东完成了,希望大家喜欢;
兼容IE7;FF;IE6
代码更简洁,更易读;

<!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=gb2312" /> <title>&#9618; 恋婷滑动门技术</title>   </head> <body> <div class="w936">     <div id="tb_" class="tb_">             <ul>                 <li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">                 流行音乐</li>                 <li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">                 美女写真</li>                 <li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">                 平面设计</li>                 <li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);">                 网络学堂</li>                 <li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);">                 恋爱宝典</li>                 <li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);">                 Q小鸽子</li>             </ul>     </div>     <div class="ctt">         <div class="dis" id="tbc_01">流行音乐 的内容</div>         <div class="undis" id="tbc_02">美女写真 的内容</div>         <div class="undis" id="tbc_03">平面设计 的内容</div>         <div class="undis" id="tbc_04">网络学堂 的内容</div>         <div class="undis" id="tbc_05">恋爱宝典 的内容</div>         <div class="undis" id="tbc_06"><b>[Q小鸽子] 的内容</b><img src="http://vickeychen.go3.icpcn.com/images/logo_main.GIF" alt="中国最Q小鸽子" />         </div>     </div> </div> <hr author="http://xiaogezi.cn" size="1" noshade="noshade" style="color:#064ca1;margin-top:30px;" /> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

滑动门,简洁,新手上路制作篇 (小鸽子系列)

JSONP原理及简单实现

浅析JSONP技术原理及实现

使用Web Uploader实现多文件上传

json的使用小结

非常实用的js验证框架实现源码附原理方法

js验证框架之RealyEasy验证详解

webpack中引用jquery的简单实现

JavaScript必知必会(五) eval 的使用

JavaScript必知必会(六) delete in instanceof

JavaScript必知必会(七)js对象继承

网络赚钱

站长故事

滑动门,简洁,新手上路制作篇 (小鸽子系列)

JSONP原理及简单实现

浅析JSONP技术原理及实现

使用Web Uploader实现多文件上传

json的使用小结

非常实用的js验证框架实现源码 附原理方法

js验证框架之RealyEasy验证详解

webpack中引用jquery的简单实现

JavaScript必知必会(五) eval 的使用

JavaScript必知必会(六) delete in instanceof

JavaScript必知必会(七)js对象继承

网络赚钱

站长故事

非常实用的js验证框架实现源码附原理方法