寿光赢创志诚信息技术有限公司»论坛 › 技术管理 › 开发技术 › jquery实现一组TAG标签鼠标滑过或者点击轮换特效 ...
返回列表 发新帖
查看: 654|回复: 0

jquery实现一组TAG标签鼠标滑过或者点击轮换特效

[复制链接]
admin

748

主题

39

回帖

3907

积分

管理员

总舵主

积分
3907
QQ
发表于 2024-5-25 19:32:34 | 显示全部楼层 |阅读模式
一、鼠标点击特效
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>jquery</title>
  5.         <script src="jquery-1.11.1.min.js"></script>
  6.         <script type="text/javascript">
  7.                 $(document).ready(function(){
  8.                         $("#l1").click(function(){
  9.                                 $("#f1").css("display", "block");
  10.                                 $("#f2").css("display", "none");
  11.                                 $("#f3").css("display", "none");
  12.                                 $("#f4").css("display", "none");
  13.                         });
  14.                         $("#l2").click(function(){
  15.                                 $("#f1").css("display", "none");
  16.                                 $("#f2").css("display", "block");
  17.                                 $("#f3").css("display", "none");
  18.                                 $("#f4").css("display", "none");
  19.                         });
  20.                         $("#l3").click(function(){
  21.                                 $("#f1").css("display", "none");
  22.                                 $("#f2").css("display", "none");
  23.                                 $("#f3").css("display", "block");
  24.                                 $("#f4").css("display", "none");
  25.                         });
  26.                         $("#l4").click(function(){
  27.                                 $("#f1").css("display", "none");
  28.                                 $("#f2").css("display", "none");
  29.                                 $("#f3").css("display", "none");
  30.                                 $("#f4").css("display", "block");
  31.                         });
  32.                 });
  33.         </script>
  34.         <style type="text/css">
  35.                 ul li{
  36.                         float: left;
  37.                         width: 100px;
  38.                         height: 40px;
  39.                         line-height: 40px;
  40.                         list-style: none;
  41.                         text-align: center;
  42.                         background: red;
  43.                         color: #ffffff;
  44.                 }
  45.                 ul li:hover{
  46.                         background: blue;
  47.                 }
  48.                 #f1{
  49.                         width: 400px;
  50.                         display: block;
  51.                 }
  52.                 #f2{
  53.                         width: 400px;
  54.                         display: none;
  55.                 }
  56.                 #f3{
  57.                         width: 400px;
  58.                         display: none;
  59.                 }
  60.                 #f4{
  61.                         width: 400px;
  62.                         display: none;
  63.                 }
  64.         </style>
  65. </head>
  66. <body>
  67. <ul>
  68.         <li id="l1">菜单一</li>
  69.         <li id="l2">菜单二</li>
  70.         <li id="l3">菜单三</li>
  71.         <li id="l4">菜单四</li>
  72. </ul>
  73. <div id="f1">
  74.         可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  75. 可选的 callback 参数是 fading 完成后所执行的函数名称。
  76. 下面的例子演示了带有不同参数的 fadeIn() 方法：
  77. </div>
  78. <div id="f2">
  79.         通过 jQuery，您可以实现元素的淡入淡出效果。
  80. jQuery 拥有下面四种 fade 方法：
  81. fadeIn()
  82. fadeOut()
  83. fadeToggle()
  84. fadeTo()
  85. </div>
  86. <div id="f3">
  87.         可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  88. 可选的 callback 参数是 fading 完成后所执行的函数名称。
  89. 下面的例子演示了带有不同参数的 fadeIn() 方法：
  90. </div>
  91. <div id="f4">
  92.         jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
  93. 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
  94. 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
  95. </div>
  96. </body>
  97. </html>
复制代码
这组代码使用click点击事件实现了点击TAG菜单实现轮换内容，如下图：

当鼠标点击菜单一、二、三、四会呈现对应的内容。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>jquery</title>
  5.         <script src="jquery-1.11.1.min.js"></script>
  6.         <script type="text/javascript">
  7.                 $(document).ready(function(){
  8.                         $("#l1").mouseover(function(){
  9.                                 $("#f1").css("display", "block");
  10.                                 $("#f2").css("display", "none");
  11.                                 $("#f3").css("display", "none");
  12.                                 $("#f4").css("display", "none");
  13.                         });
  14.                         $("#l2").mouseover(function(){
  15.                                 $("#f1").css("display", "none");
  16.                                 $("#f2").css("display", "block");
  17.                                 $("#f3").css("display", "none");
  18.                                 $("#f4").css("display", "none");
  19.                         });
  20.                         $("#l3").mouseover(function(){
  21.                                 $("#f1").css("display", "none");
  22.                                 $("#f2").css("display", "none");
  23.                                 $("#f3").css("display", "block");
  24.                                 $("#f4").css("display", "none");
  25.                         });
  26.                         $("#l4").mouseover(function(){
  27.                                 $("#f1").css("display", "none");
  28.                                 $("#f2").css("display", "none");
  29.                                 $("#f3").css("display", "none");
  30.                                 $("#f4").css("display", "block");
  31.                         });
  32.                 });
  33.         </script>
  34.         <style type="text/css">
  35.                 ul li{
  36.                         float: left;
  37.                         width: 100px;
  38.                         height: 40px;
  39.                         line-height: 40px;
  40.                         list-style: none;
  41.                         text-align: center;
  42.                         background: red;
  43.                         color: #ffffff;
  44.                 }
  45.                 ul li:hover{
  46.                         background: blue;
  47.                 }
  48.                 #f1{
  49.                         width: 400px;
  50.                         display: block;
  51.                 }
  52.                 #f2{
  53.                         width: 400px;
  54.                         display: none;
  55.                 }
  56.                 #f3{
  57.                         width: 400px;
  58.                         display: none;
  59.                 }
  60.                 #f4{
  61.                         width: 400px;
  62.                         display: none;
  63.                 }
  64.         </style>
  65. </head>
  66. <body>
  67. <ul>
  68.         <li id="l1">菜单一</li>
  69.         <li id="l2">菜单二</li>
  70.         <li id="l3">菜单三</li>
  71.         <li id="l4">菜单四</li>
  72. </ul>
  73. <div id="f1">
  74.         可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  75. 可选的 callback 参数是 fading 完成后所执行的函数名称。
  76. 下面的例子演示了带有不同参数的 fadeIn() 方法：
  77. </div>
  78. <div id="f2">
  79.         通过 jQuery，您可以实现元素的淡入淡出效果。
  80. jQuery 拥有下面四种 fade 方法：
  81. fadeIn()
  82. fadeOut()
  83. fadeToggle()
  84. fadeTo()
  85. </div>
  86. <div id="f3">
  87.         可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  88. 可选的 callback 参数是 fading 完成后所执行的函数名称。
  89. 下面的例子演示了带有不同参数的 fadeIn() 方法：
  90. </div>
  91. <div id="f4">
  92.         jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
  93. 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
  94. 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
  95. </div>
  96. </body>
  97. </html>
复制代码
这个代码实现了鼠标滑过菜单呈现不同的内容，使用了鼠标滑过事件mouseover，自己可以做测试。

我们还可以加以改进，代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>jquery</title>
  5.         <script src="jquery-1.11.1.min.js"></script>
  6.         <script type="text/javascript">
  7.                 $(document).ready(function(){
  8.                         $("#l1").mouseover(function(){
  9.                                 $("#f1").css("display", "block");
  10.                                 $("#l1").css("background", "blue");
  11.                                 $("#f2").css("display", "none");
  12.                                 $("#l2").css("background", "red");
  13.                                 $("#f3").css("display", "none");
  14.                                 $("#l3").css("background", "red");
  15.                                 $("#f4").css("display", "none");
  16.                                 $("#l4").css("background", "red");
  17.                         });
  18.                         $("#l2").mouseover(function(){
  19.                                 $("#f1").css("display", "none");
  20.                                 $("#l1").css("background", "red");
  21.                                 $("#f2").css("display", "block");
  22.                                 $("#l2").css("background", "blue");
  23.                                 $("#f3").css("display", "none");
  24.                                 $("#l3").css("background", "red");
  25.                                 $("#f4").css("display", "none");
  26.                                 $("#l4").css("background", "red");
  27.                         });
  28.                         $("#l3").mouseover(function(){
  29.                                 $("#f1").css("display", "none");
  30.                                 $("#l1").css("background", "red");
  31.                                 $("#f2").css("display", "none");
  32.                                 $("#l2").css("background", "red");
  33.                                 $("#f3").css("display", "block");
  34.                                 $("#l3").css("background", "blue");
  35.                                 $("#f4").css("display", "none");
  36.                                 $("#l4").css("background", "red");
  37.                         });
  38.                         $("#l4").mouseover(function(){
  39.                                 $("#f1").css("display", "none");
  40.                                 $("#l1").css("background", "red");
  41.                                 $("#f2").css("display", "none");
  42.                                 $("#l2").css("background", "red");
  43.                                 $("#f3").css("display", "none");
  44.                                 $("#l3").css("background", "red");
  45.                                 $("#f4").css("display", "block");
  46.                                 $("#l4").css("background", "blue");
  47.                         });
  48.                 });
  49.         </script>
  50.         <style type="text/css">
  51.                 ul li{
  52.                         float: left;
  53.                         width: 100px;
  54.                         height: 40px;
  55.                         line-height: 40px;
  56.                         list-style: none;
  57.                         text-align: center;
  58.                         background: red;
  59.                         color: #ffffff;
  60.                 }
  61.                 ul li:hover{
  62.                         background: blue;
  63.                 }
  64.                 .on{
  65.                         background: blue;
  66.                 }
  67.                 #f1{
  68.                         width: 400px;
  69.                         display: block;
  70.                 }
  71.                 #f2{
  72.                         width: 400px;
  73.                         display: none;
  74.                 }
  75.                 #f3{
  76.                         width: 400px;
  77.                         display: none;
  78.                 }
  79.                 #f4{
  80.                         width: 400px;
  81.                         display: none;
  82.                 }
  83.         </style>
  84. </head>
  85. <body>
  86. <ul>
  87.         <li id="l1" class="on">菜单一</li>
  88.         <li id="l2">菜单二</li>
  89.         <li id="l3">菜单三</li>
  90.         <li id="l4">菜单四</li>
  91. </ul>
  92. <div id="f1">
  93.         可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  94. 可选的 callback 参数是 fading 完成后所执行的函数名称。
  95. 下面的例子演示了带有不同参数的 fadeIn() 方法：
  96. </div>
  97. <div id="f2">
  98.         通过 jQuery，您可以实现元素的淡入淡出效果。
  99. jQuery 拥有下面四种 fade 方法：
  100. fadeIn()
  101. fadeOut()
  102. fadeToggle()
  103. fadeTo()
  104. </div>
  105. <div id="f3">
  106.         可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  107. 可选的 callback 参数是 fading 完成后所执行的函数名称。
  108. 下面的例子演示了带有不同参数的 fadeIn() 方法：
  109. </div>
  110. <div id="f4">
  111.         jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
  112. 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
  113. 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
  114. </div>
  115. </body>
  116. </html>
复制代码
实际效果如下图：

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
道不同，不相为谋！理想要有，万一实现了呢？
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注公众号
Archiver|手机版|小黑屋|寿光赢创志诚信息技术有限公司业务论坛

相关侵权、举报、投诉及建议等，请发 E-mail：2513533699@qq.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.|鲁ICP备19000917号|鲁公网安备37078302000320号

在本版发帖
关注公众号
QQ客服返回顶部