您现在的位置: 365建站网 > 365文章 > jquery仅用6行代码实现滑动门效果

jquery仅用6行代码实现滑动门效果

文章来源:365jz.com     点击数:287    更新时间:2017-08-15 18:21   参与评论

本文实例讲述了jquery仅用6行代码实现滑动门效果。分享给大家供大家参考。具体如下:

这是一个基于jQuery的滑动门导航栏,仅6行代码,不知还有没有比此更少的代码了,在滑动门的实现过程中,用背景图片修饰了每个“门”的背景,更美观漂亮,有着极好的用户操作体验。

运行效果如下图所示:

在线演示地址如下:

https://www.365jz.com/daima/67/

具体代码如下:

</>code

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>jquery 6行代码实现滑动门</title>
  7. <style>
  8. *{margin:0; padding:0;font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px}
  9. .ts{ width:50%; margin:0 auto}
  10. .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}
  11. .ts .titLeft{float:left; height:27px;font-size:1px; width:12px;;background:url(images/titLeft.gif) no-repeat}
  12. .ts .titOp{float:left; height:21px; padding:5px 0 0}
  13. .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}
  14. .ts .titOp li.current{ background:#fff;color:#290052; }
  15. .ts .titRight{float:right; height:26px;font-size:1px; width:32px;;background:url(images/titRight.gif) no-repeat}
  16. .ts .line{border-left:1px solid #88AAD6;border-right:1px solid #88AAD6;clear:both; height:13px; line-height:13px; padding:5px; background:#E9F9FE}
  17. .ts .tsMb{border:1px solid #88AAD6; border-top:none; padding:10px; height:120px; min-height:100px; font-weight:bold}
  18. </style>
  19. <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
  20. <script>
  21. $(function(){
  22. $("#tsMb div:not(:first)").hide();
  23. $("#titOp li").each(function(index){
  24. $(this).mouseover(
  25. function(){
  26. $("#titOp li.current").removeClass("current");
  27. $(this).addClass("current");
  28. $("#tsMb > div:visible").hide();
  29. $("#tsMb div:eq(" + index + ")").show();
  30. })
  31. })
  32. })
  33. </script>
  34. </head>
  35. <body>
  36. <div style="clear:both; height:30px"></div>
  37. <!--调试层-->
  38. <div class="ts">
  39. <div class="tsHead">
  40. <div class="titLeft"></div>
  41. <div class="titOp" id="titOp">
  42. <ul>
  43. <li class="current">脚本调试器</li>
  44. <li>样式调试器</li>
  45. <li>DOM调试器</li>
  46. </ul>
  47. </div>
  48. <div class="titRight"></div>
  49. </div>
  50. <div class="line">sadfasdfsd</div>
  51. <div class="tsMb" id="tsMb">
  52. <div>脚本</div>
  53. <div>样式</div>
  54. <div>DOM</div>
  55. </div>
  56. </div>
  57. <!--调试层 end-->
  58. </body>
  59. </html>

希望本文所述对大家的jquery程序设计有所帮助。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (287人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号