recherche

Maison >interface Web >js tutoriel >jquery implémente l'onglet de fondu en sortie de contenu universel effect_jquery

jquery implémente l'onglet de fondu en sortie de contenu universel effect_jquery

WBOY
WBOYoriginal
2016-05-16 15:40:221079parcourir

L'exemple de cet article décrit comment jquery implémente un effet d'onglet de fondu de sortie de contenu universel. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'une fonction d'onglet TAB couramment utilisée sur les pages Web. Elle peut pivoter automatiquement lorsqu'il n'y a pas d'opération de souris. Elle est généralement embellie et semble un peu grossière, je pense. ce sera plus beau.

L'effet de l'opération est comme indiqué ci-dessous :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-show-info-tab-nav-codes/

Le code spécifique est le suivant : 

<!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>通用TAB-有自动轮换功能</title>
 <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
 <style type="text/css">
 <!--
 * {
 padding:0;
 margin:0;
 list-style:none;
 }
 .cur {
 color:#000;
 background-color:#FFF;
 }
 .red {
 font-size: 20px;
 font-weight: bolder;
 }
 #lxfTab-click {
 -moz-border-radius:5px;
 background-color:#069;
 width:600px;
 overflow:hidden;
 padding:2px;
 margin-top:20px;
 margin-left:auto;
 margin-right:auto;
 }
 #lxfTab-click .title {
 color:#FFF;
 }
 #lxfTab-click .title li {
 float:left;
 padding:1px;
 cursor:pointer;
 width:40px;
 margin:8px 0 8px 8px;
 border:1px solid #FFF;
 -moz-border-radius:5px;
 text-align:center;
 }
 #lxfTab-click .content {
 width:600px;
 float:left;
 }
 #lxfTab-click .content li {
 word-wrap:break-word;
 background-color:#FFF;
 padding:6px;
 -moz-border-radius:5px;
 width: 572px;
 margin-top: 0px;
 margin-right: 8px;
 margin-bottom: 8px;
 margin-left: 8px;
 }
 -->
 </style>
 <script>
 $(function() {
 $("#lxfTab-click .title li:first").addClass("cur");
 $("#lxfTab-click .content li:not(:first)").hide();
 $("#lxfTab-click .title li").click(function() {
  var index = $("#lxfTab-click .title li").index($(this));
  $("#lxfTab-click .title li").removeClass("cur");
  $(this).addClass("cur");
  $("#lxfTab-click .content li").hide().eq(index).fadeIn("fast");
  $(".now").text(index + 1);
 });
 /* 自动轮换*/
 var i = -1;
 //设置起始位置
 var speed = 3000;
 //设置轮换速度
 var n = $("#lxfTab-click .title li").length - 1;
 function autoroll() {
  if(i >= n) {
  i = -1;
  }
  i++;
  $("#lxfTab-click .title li").removeClass("cur").eq(i).addClass("cur");
  $("#lxfTab-click .content li").hide().eq(i).fadeIn("fast");
  timer = setTimeout(autoroll, speed);
 };
 /* 鼠标悬停即停止自动轮换 */
 function stoproll() {
  $("#lxfTab-click li").hover(function() {
  clearTimeout(timer);
  i = $(this).prevAll().length;
  }, function() {
  timer = setTimeout(autoroll, speed);
  });
 };
 autoroll();
 //执行自动轮换函数
 stoproll();
 //启动悬停功能
 });
 </script>
 </head>
 <body>
 <div id="lxfTab-click">
 <ul class="title">
 <li>
  1
 </li>
 <li>
  2
 </li>
 <li>
  3
 </li>
 <li>
  4
 </li>
 <li>
  5
 </li>
 </ul>
 <div class="LRbutton">
 <ul>
  <li></li><li></li><li></li>
 </ul>
 </div>
 <ul class="content">
 <li>
  1
 </li>
 <li>
  2
 </li>
 <li>
  3
 </li>
 <li>
  4
 </li>
 <li>
  5
 </li>
 </ul>
 </div>
 </body>
</html>

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jquery implémente un menu déroulant de navigation secondaire simple effect_jqueryArticle suivant：jquery implémente un menu déroulant de navigation secondaire simple effect_jquery

Articles Liés

Voir plus