suchen

Heim >Web-Frontend >js-Tutorial >jQuery CSS implementiert den Sliding-Label-Spaltenwechseleffekt_jquery

jQuery CSS implementiert den Sliding-Label-Spaltenwechseleffekt_jquery

WBOY
WBOYOriginal
2016-05-16 15:25:151501Durchsuche

Das Beispiel in diesem Artikel beschreibt den durch jQuery erzielten Effekt des reibungslosen Scrollens von Beschriftungsspalten. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der laufende Code lautet wie folgt

Der spezifische Code lautet wie folgt

<html>
 <head>
 <title>jQuery平滑滚动的标签分栏切换</title>
 <meta charset="gb2312">
 <style>
 ul,li{
 margin:0px;
 padding:0px;
 list-style:none
 }
 li{
 float:left;
 background-color:#8c6239;
 color:white;
 padding:5px;
 margin-right:2px;
 border:1px solid white;
 }
 li.myLi{
 background-color:#ea5500;
 border:1px solid #ea5500;
 }
 div{
 clear:left;
 background-color:#ea5500;
 color:white;
 width:300px;
 height:100px;
 padding:10px;
 display:none;
 }
 div.myDiv{
 display:block;
 }
 </style>
 <script src="./jquery-1.7.1.min.js"></script>
 <script>
 var timeId;
 $(document).ready(function(){
 $("li").each(function(index){
 //index是li数组的的索引值
 $(this).mouseover(function(){
 var liNode = $(this);
 //延迟是为了减少服务器压力，防止鼠标快速滑动
 timeId = setTimeout(function(){
  //将原来显示的div隐藏掉
  $("div.myDiv").removeClass("myDiv");
  //将原来的li的myLi去掉
  $("li.myLi").removeClass("myLi");
  //显示当前鼠标li的对应的div
  $("div").eq(index).addClass("myDiv");
  //增加当前li的myLi
  liNode.addClass("myLi");
 },300);
 }).mouseout(function(){
 clearTimeout(timeId);
 });
 });
 });
 </script>
 </head>
 <body>
 <ul>
 <li class="myLi">this is li 1</li>
 <li>this is li 2</li>
 <li>this is li 3</li>
 </ul>
 <div class="myDiv">this is div1</div>
 <div>this is div2</div>
 <div>this is div3</div>
 </body>
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

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：Detaillierte Erläuterung der primitiven Datentypen Null und Undefiniert in JavaScript_javascript-TechnikenNächster Artikel：Detaillierte Erläuterung der primitiven Datentypen Null und Undefiniert in JavaScript_javascript-Techniken

In Verbindung stehende Artikel

Mehr sehen