Klassischer Schiebetüreffekt implementiert mit jQuery

Klassischer Schiebetüreffekt implementiert mit jQuery_jquery

WBOY

Freigeben： 2016-05-16 15:38:17

Original

1615 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den klassischen Schiebetüreffekt, der von jQuery implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine jQuery-Schiebetür, obwohl sie vom Stil her etwas altmodisch ist, sie verfügt jedoch bereits über die klassische Schiebetürfunktion. Interessierte Freunde können die Benutzeroberfläche weiter verschönern.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-jd-hd-move-menu-codes/

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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery 滑动门</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
 var len=$(".ul1 li").length;
 var index;
 var time;
 $(".ul1 li").mousemove(function(){
  index=$(".ul1 li").index(this);
  show(index);
  }).eq(0).mousemove();
  $(".ul2").hover(function(){
  clearInterval(time);
   },function(){
   time=setInterval(function(){
   show(index)
   index++;
   if(index==len){index=0;}
   },2000);
   }).trigger("mouseleave");
})
function show(index) {
 $(".ul2 li").eq(index).show().siblings().hide();
 $(".ul1 li").css("background","url(images/aa.gif)").eq(index).css("background","url(images/bb.gif)");
} 
</script>
<style type="text/css">
body{ font-family:"宋体"; font-size:9pt; color:#ffffff}
 #container{ width:510px; height:200px; border:4px #1025c0 solid; margin:0 auto}
 #container ul li{ cursor:pointer}
 #container .top{ border:none}
 #container .top ul{ margin:0; padding:0}
 #container .top ul li{ cursor:pointer;float:left;list-style:none; width:100px; height:40px; line-height:40px; text-align:center; background:url(images/aa.gif) repeat-x; border:1px black solid}
 #container .bottom{ width:510px; height:160px; color:#000000; border:none;}
 #container .bottom ul{ margin:0; padding:0; width:510px; height:160px;}
 #container .bottom ul li{ list-style:none}
 .hide{ display:none}
</style>
</head>
<body>
<div id="container">
<div class="top">
<ul class="ul1">
<li>第一栏</li><li>第二栏</li><li>第三栏</li><li>第四栏</li><li>第五栏</li>
</ul>
</div>
<div class="bottom">
<ul class="ul2">
<li>第一栏第一栏第一栏第一栏第一栏</li><li class="hide">第二栏第二栏第二栏第二栏</li><li class="hide">第三栏第三栏第三栏第三栏</li><li class="hide">第四栏第四栏第四栏第四栏</li><li class="hide">第五栏第五栏第五栏第五栏</li>
</ul>
</div>
</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.