cari

Rumah >hujung hadapan web >tutorial js >jQuery CSS melaksanakan penukaran lajur label gelongsor effect_jquery

jQuery CSS melaksanakan penukaran lajur label gelongsor effect_jquery

WBOY
WBOYasal
2016-05-16 15:25:151498semak imbas

Contoh dalam artikel ini menerangkan kesan penukaran lajur label tatal lancar yang dicapai oleh jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kod berjalan adalah seperti berikut

Kod khusus adalah seperti berikut

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

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang jenis data primitif Null dan Undefined dalam teknik JavaScript_javascriptArtikel seterusnya：Penjelasan terperinci tentang jenis data primitif Null dan Undefined dalam teknik JavaScript_javascript

Artikel berkaitan

Lihat lagi