jquery hanya menggunakan 6 baris kod untuk mencapai effect_jquery pintu gelangsar-tutorial js-php.cn

jquery hanya menggunakan 6 baris kod untuk mencapai effect_jquery pintu gelangsar

WBOY

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

asal

1136 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jquery hanya menggunakan 6 baris kod untuk mencapai kesan pintu gelangsar. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini adalah bar navigasi pintu gelangsar berdasarkan jQuery, dengan hanya 6 baris kod Saya tertanya-tanya jika terdapat kod yang kurang daripada ini Semasa pelaksanaan pintu gelangsar, imej latar belakang digunakan untuk menghiasi setiap "pintu "Latar belakangnya lebih cantik dan mempunyai pengalaman pengguna yang sangat baik.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-simple-nav-menu-style-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>jquery 6行代码实现滑动门</title>
<style>
*{margin:0; padding:0;font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px}
.ts{ width:50%; margin:0 auto}
.ts .tsHead{clear:both; height:27px;background:url(images/titLine.gif) repeat-x left bottom; border-left:1px solid #88AAD6; border-right:1px solid #88AAD6; border-top:1px solid #88AAD6}
.ts .titLeft{float:left; height:27px;font-size:1px; width:12px;;background:url(images/titLeft.gif) no-repeat}
.ts .titOp{float:left; height:21px; padding:5px 0 0}
.ts .titOp li{ float:left; width:100px;height:15px; padding:5px 0 0; margin:0 0 0 3px;border:1px solid #88AAD6; border-bottom:1px solid #fff;background:#eeeeff; color:#999;text-align:center; cursor:default}
.ts .titOp li.current{ background:#fff;color:#290052; }
.ts .titRight{float:right; height:26px;font-size:1px; width:32px;;background:url(images/titRight.gif) no-repeat}
.ts .line{border-left:1px solid #88AAD6;border-right:1px solid #88AAD6;clear:both; height:13px; line-height:13px; padding:5px; background:#E9F9FE}
.ts .tsMb{border:1px solid #88AAD6; border-top:none; padding:10px; height:120px; min-height:100px; font-weight:bold}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
$(function(){
  $("#tsMb div:not(:first)").hide();
  $("#titOp li").each(function(index){
    $(this).mouseover(
     function(){
     $("#titOp li.current").removeClass("current");
     $(this).addClass("current");
     $("#tsMb > div:visible").hide();
     $("#tsMb div:eq(" + index + ")").show();
    })
  })
})
</script>
</head>
<body>
 <div style="clear:both; height:30px"></div>
 <!--调试层-->
 <div class="ts">
     <div class="tsHead">
         <div class="titLeft"></div>
         <div class="titOp" id="titOp">
          <ul>
             <li class="current">脚本调试器</li>
             <li>样式调试器</li>
             <li>DOM调试器</li>
            </ul>
         </div>
         <div class="titRight"></div>
     </div>
     <div class="line">sadfasdfsd</div>
     <div class="tsMb" id="tsMb">
       <div>脚本</div>
       <div>样式</div>
       <div>DOM</div>
     </div>
 </div>
 <!--调试层 end-->
</body>
</html>

Salin selepas log masuk

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