jquery melaksanakan kandungan universal fade-out Tab effect

jquery melaksanakan kandungan universal fade-out Tab effect_jquery

WBOY

Lepaskan： 2016-05-16 15:40:22

asal

1093 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jquery melaksanakan kesan Tab fade-out kandungan universal. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini adalah fungsi tab TAB yang biasa digunakan pada halaman web Ia boleh berputar secara automatik apabila tiada operasi tetikus secara amnya dicantikkan dan kelihatan agak kasar ia akan menjadi lebih cantik.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.