suchen

Heim  >  Artikel  >  Web-Frontend  >  Von jQuery_jquery implementierter Multi-Schiebetür- und Multi-Tab-Effektcode

Von jQuery_jquery implementierter Multi-Schiebetür- und Multi-Tab-Effektcode

WBOY
WBOYOriginal
2016-05-16 15:07:511817Durchsuche

Das Beispiel in diesem Artikel beschreibt den von jQuery implementierten Multi-Sliding Door- und Multi-Tab-Effekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt: 

<!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>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超多滑动门效果</title>
<style type="text/css">
* {
  margin:0;
  padding:0;
}
body {
  font-size:12px;
}
ul, li {
  list-style-type:none;
}
#tab {
  width:500px;
  height:200px;
  margin:20px auto;
  overflow:hidden;
}
#tab .tab_title {
  width:500px;
  height:22px;
  overflow:hidden;
  left:0;
  top:0;
  clear:both;
  overflow:hidden;
  position:relative;
}
#tab .tab_title .u {
  width:465px;
  overflow:hidden;
  position:relative;
}
#tab .tab_title ul {
  margin:0 5px;
  position:absolute;
  float:left;
  width:2784px;/*这个即是滑动门的总长度！就是所有的li的宽度加上间距！计算本案例中的宽度即为：24*100+14*24+24*2（2为边框宽度）=2784 */
}
#tab .tab_title div {
  float:left;
  width:15px;
  height:20px;
  line-height:20px;
  cursor:pointer;
}
#tab .tab_title span.vright {
  top:0;
  right:5px;
  margin-left:2px;
}
#tab .tab_title span.vleft {
  top:0;
  left:0px;
  padding-left:5px;
}
#tab .tab_title li {
  float:left;
  width:100px;/*这个的宽度即是四个滑动门栏目的宽度*/
  height:20px;
  line-height:20px;
  text-align:center;
  background-color:#cccccc;
  margin-right:14px;
  border:1px #999999 solid;
  cursor:pointer;
}
#tab .tab_title li:hover {
  background-color:#999999
}
#tab .tab_title li.selected {
  background-color:#666666;
}
#tab .tab_content {
  width:476px;
  height:156px;
  overflow:hidden;
  padding:10px;
  border:1px #CCCCCC solid;
}
#tab .tab_content div {
  border:1px #999999 dotted;
}
#tab .tab_content div p {
  line-height:1.5;
  text-indent:25px;
  color:#333333;
}
#tab .tab_content .none {
  display:none;
}
#div1 {
  border:1px #CCCCCC solid;
  position:absolute;
  display:none;
  background:#EEF7EE;
  font-size:12px;
  padding:5px;
  color:#999999;
}
#div2 {
  width:120px;
  height:15px;
  border:1px #CCCCCC solid;
  position:absolute;
  display:none;
  background:#CCCCCC;
  font-size:5px;
  padding:2px;
  color:#999999;
}
</style>
<script language="javascript">
 $(function(){
 var index = 0;
 $(".tab_title ul li").click(function(){
  index = $(".tab_title ul li").index(this);
  $(this).addClass("selected").siblings().removeClass("selected");
  $(".tab_content div").eq(index).show().siblings().hide();
 });
 var i = 4; //这个前端展示几个滑动门栏目
 var len = $(".u .scrol li").length;
 var page = 1;
 var maxpage = Math.ceil(len/i);
 var scrollWidth = $(".u").width();
 var divbox = "<div id='div1' >呵呵，没有了</div>";
 $("body").append(divbox);
 $(".vright").click(function(e){
  if(!$(".u .scrol").is(":animated")){
  if(page == maxpage ){
  $(".u .scrol").stop();
  $("#div1").css({
   "top": (e.pageY + 20) +"px",
   "left": (e.pageX + 20) +"px",
   "opacity": "0.9"
  }).stop(true,false).fadeIn(800).fadeOut(800);
  }else{
  $(".u .scrol").animate({left : "-=" + scrollWidth +"px"},2000);
  page++;
  }
  }
 });
 $(".vleft").click(function(){
 if(!$(".u .scrol").is(":animated")){
  if(page == 1){
  $(".u .scrol").stop();
  }else{
  $(".u .scrol").animate({left : "+=" + scrollWidth +"px"},2000);
  page--;
  }
  }
 });
 });
</script>
</head>
<body>
<div id="tab">
 <div class="tab_title">
  <div class="vleft"><strong><<</strong></div>
  <div class="u">
   <ul class="scrol">
    <li class="selected">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
   </ul>
  </div>
  <div class="vright"><strong>>></strong></div>
 </div>
 <div class="tab_content">
  <div>
   <p>1的内容</p>
  </div>
  <div class="none">
   <p>2的内容</p>
  </div>
  <div class="none">
   <p>3的内容</p>
  </div>
  <div class="none">
   <p>4的内容</p>
  </div>
  <div class="none">
   <p>5的内容</p>
  </div>
  <div class="none">
   <p>6的内容</p>
  </div>
  <div class="none">
   <p>7的内容</p>
  </div>
  <div class="none">
   <p>8的内容</p>
  </div>
  <div class="none">
   <p>9的内容</p>
  </div>
  <div class="none">
   <p>10的内容</p>
  </div>
  <div class="none">
   <p>10的内容</p>
  </div>
  <div class="none">
   <p>12的内容</p>
  </div>
  <div class="none">
   <p>13的内容</p>
  </div>
  <div class="none">
   <p>14的内容</p>
  </div>
  <div class="none">
   <p>15的内容</p>
  </div>
  <div class="none">
   <p>16的内容</p>
  </div>
  <div class="none">
   <p>17的内容</p>
  </div>
  <div class="none">
   <p>18的内容</p>
  </div>
  <div class="none">
   <p>19的内容</p>
  </div>
  <div class="none">
   <p>20的内容</p>
  </div>
  <div class="none">
   <p>21的内容</p>
  </div>
  <div class="none">
   <p>22的内容</p>
  </div>
  <div class="none">
   <p>23的内容</p>
  </div>
  <div class="none">
   <p>24的内容</p>
  </div>
 </div>
</div>
</body>
</html>

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der Drag-Effekte und Fähigkeiten von JQuery“, „Zusammenfassung der Fähigkeiten der jQuery-Erweiterung“ , „Zusammenfassung der allgemeinen klassischen JQuery-Spezialeffekte“, „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung des JQuery-Selektors“ und „jQuery Allgemeine Plug-Ins und Nutzungsübersicht》

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die drei Funktionen Slice, Splice und Split sind in den Fähigkeiten von javascript_javascript schwer zu unterscheidenNächster Artikel：Die drei Funktionen Slice, Splice und Split sind in den Fähigkeiten von javascript_javascript schwer zu unterscheiden

In Verbindung stehende Artikel

Mehr sehen