本文实例讲述了jquery仅用6行代码实现滑动门效果。分享给大家供大家参考。具体如下:
这是一个基于jQuery的滑动门导航栏,仅6行代码,不知还有没有比此更少的代码了,在滑动门的实现过程中,用背景图片修饰了每个“门”的背景,更美观漂亮,有着极好的用户操作体验。
运行效果如下图所示:
在线演示地址如下:
https://www.365jz.com/daima/67/
具体代码如下:
</>code
- <!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>jquery 6行代码实现滑动门</title>
- <style>
- *{margin:0; padding:0;font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px}
- .ts{ width:50%; margin:0 auto}
- .ts .tsHead{clear:both; height:27px;background:url(images/titLine.gif) repeat-x left bottom; border-left:1px solid #88AAD6; border-right:1px solid #88AAD6; border-top:1px solid #88AAD6}
- .ts .titLeft{float:left; height:27px;font-size:1px; width:12px;;background:url(images/titLeft.gif) no-repeat}
- .ts .titOp{float:left; height:21px; padding:5px 0 0}
- .ts .titOp li{ float:left; width:100px;height:15px; padding:5px 0 0; margin:0 0 0 3px;border:1px solid #88AAD6; border-bottom:1px solid #fff;background:#eeeeff; color:#999;text-align:center; cursor:default}
- .ts .titOp li.current{ background:#fff;color:#290052; }
- .ts .titRight{float:right; height:26px;font-size:1px; width:32px;;background:url(images/titRight.gif) no-repeat}
- .ts .line{border-left:1px solid #88AAD6;border-right:1px solid #88AAD6;clear:both; height:13px; line-height:13px; padding:5px; background:#E9F9FE}
- .ts .tsMb{border:1px solid #88AAD6; border-top:none; padding:10px; height:120px; min-height:100px; font-weight:bold}
- </style>
- <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
- <script>
- $(function(){
- $("#tsMb div:not(:first)").hide();
- $("#titOp li").each(function(index){
- $(this).mouseover(
- function(){
- $("#titOp li.current").removeClass("current");
- $(this).addClass("current");
- $("#tsMb > div:visible").hide();
- $("#tsMb div:eq(" + index + ")").show();
- })
- })
- })
- </script>
- </head>
- <body>
- <div style="clear:both; height:30px"></div>
- <!--调试层-->
- <div class="ts">
- <div class="tsHead">
- <div class="titLeft"></div>
- <div class="titOp" id="titOp">
- <ul>
- <li class="current">脚本调试器</li>
- <li>样式调试器</li>
- <li>DOM调试器</li>
- </ul>
- </div>
- <div class="titRight"></div>
- </div>
- <div class="line">sadfasdfsd</div>
- <div class="tsMb" id="tsMb">
- <div>脚本</div>
- <div>样式</div>
- <div>DOM</div>
- </div>
- </div>
- <!--调试层 end-->
- </body>
- </html>
希望本文所述对大家的jquery程序设计有所帮助。
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛