kaedah jQuery untuk melaksanakan navigasi baris menatal effect_jquery

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan kesan navigasi baris menatal. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Kali pertama saya melihat navigasi sebegini adalah di laman web rasmi Meizu Pada masa itu (tahun lepas) saya fikir ia cukup bagus, tetapi saya tidak tahu JavaScript, jadi ia "di luar jangkauan" pada masa itu. masa. Hari ini saya pergi ke tapak web rasmi QQ untuk Android dan menemui navigasi yang serupa dengan ini.

Kesannya adalah seperti berikut:

Rumah
Beritahu saya
Log
Album
 
CSS:

body,ul,li{margin:0;padding:0;}
#testnav{;height:80px;background:#333;}
.testmenu{width:320px;padding-top:45px;margin:0 auto;}
.testbox div{float:left;width:80px;height:30px;text-align:center;}
.testbox a{color:#ccc;text-decoration:none;font:700 12px/1 "宋体";}
.testbox a:hover{color:#CCEEFF;text-decoration:underline;}
.testline-box{width:100%;background:#eee;}
.testline{display:block;height:3px;width:80px;background:#999;}

HTML:

<div id="testnav">
 <div class="testmenu">
  <div class="testbox">
   <div><a href="javascript:void(0)">首页</a></div>
   <div><a href="javascript:void(0)">说说</a></div>
   <div><a href="javascript:void(0)">日志</a></div>
   <div><a href="javascript:void(0)">相册</a></div>
  </div>
  <div style="clear:both;"></div>
  <div class="testline-box">
 <span class="testline"></span>
 </div>
 </div>
</div>

jQuery:

var $line=$("span.testline");
var $w=$(".testbox > div").width();
var m=0;
$(".testbox > div").each(function(n){
 var x=$w*n;
 $(this).mouseenter(function(){
  $line.stop(true,true).animate({"margin-left":x},"slow","easeOutBack");
 });
 $("a",this).click(function(){
  m=x;
 });
});
$(".testbox").mouseleave(function(){
 $line.stop(true,true).animate({"margin-left":m},"slow","easeOutBack");
});

Kod ini agak kasar, dan ditambah pula dengan tahap saya yang terhad, mungkin anda boleh memudahkannya dan menulisnya dengan lebih baik (idea umum sepatutnya seperti ini juga_).

Nota: Kesan pemalam pelonggaran digunakan dalam kod. Ingat untuk memuat turun dan merujuk pemalam ini. Jika anda tidak mahu menggunakan pemalam pelonggaran, anda boleh memadamkan "easeOutBack" dalam JS atau menggantikannya dengan "swing".

Saya menggunakan javascript:void(0) sebaliknya untuk alamat pautan menu dalam demo Tujuan utama adalah untuk memudahkan kesan demonstrasi. Dalam aplikasi praktikal, kita boleh menentukan lokasi semasa berdasarkan URL semasa Selepas menentukan lokasi, kita boleh menetapkan semula nilai kepada pembolehubah m dalam JavaScript untuk menentukan menu mana yang sepatutnya diletakkan di bawah. Sudah tentu mesti ada cara lain untuk menentukan lokasi semasa.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.