ナビゲーション バーの動的表示効果を実現するには、プラグイン Lavalamp を使用します。以前はアニメーションを使用して実現しましたが、効果はあまり良くありませんでした。 コードをコピーします。 コードは次のとおりです。 <br><script src="js /jquery.easing.min.js" type="text/javascript"><br><script src="js/ jquery.lavalamp.js" type="text/javascript">< ;/script> <br><script type="text/javascript"> <br>$(function() { <br>$(" .nav").lavaLamp({ <br>fx: "backout" , <br>speed: 1100, <br>mouseover:function(event, menuItem){alert();} <br>}); <br> }); <br><br><スタイル> <br><br>高さ:100px; float:left; <br>} <br>.nav li { <br>min-width:40px;パディング:0 15px; <br>カラー:#000; <br>テキスト整列:左; >} <br>.nav li.back { <br>background: #86bf40; <br>-moz-border-radius: 5px; <br>-webkit-border-radius: 5px; 2; <br>幅: 40px; <br>高さ: 100px; /*----*/ <br>位置: 絶対; /*----*/ <br>margin-top: 0px; <br>margin-left:5px; <br>.nav li a { <br>color: #000; z-index: 2; /*----*/ <br>font-variant: small-caps; <br>position: 相対; / <br>マージン: 自動 10px; <br>} <br> <br></head> <br><br><br><-ヘッダー --> <br><div class="headerbox" > <br><div class="header"> "ロゴ"><img src="images/logo.png " alt="ユスユン" /></a> <br><ul class="nav"> ="current"><a href="#" >ホームページ</a></li> <br><li class="1"><a href="#">個人版</a></li> <br><li class="2"><a href="#">小規模および中型バージョン</a></li> <li class="3"><a href="#">Enterprise Edition</a></li> <br><li class="4"><a href=" #">サービスと価格</a> </li> <br><li class="5"><a href="#">会社概要</a></li> <br></a> <br><div class="login"> ログイン</a> a href="" class="icon_login ">/a> <br><br><br></ body> <BR><br> </html> <br><BR> <br>//// ------lavalamp.js ファイルの変更---------- - <br><BR><BR><BR><BR>コードをコピー<BR><BR><BR> コードは次のとおりです:<BR><div class="codebody" id="code91596"> <BR>(function($) { <BR>$.fn.lavaLamp = function(o) { <BR>o = $.extend({ fx: "リニア"、速度: 500、クリック: function( ){} }, o || {}); <br><br><BR>return this.each(function() { <BR>var me = $(this), <BR>noop = function(el) { <br><br>}, <BR>$back = $('<li class="back"><div class="left"></div></li>') .appendTo(me)、<br>$li = $("li", this)、<br>curr = $("li.current", this)[0] || $($li[0])。 addClass("current")[0]; <br><br><br>$li.not(".back").hover(function() { move(this);}); <br>$(".nav li:eq(0) a").css("color","#FFF"); <br>function setCurr(el) {alert(el.offsetWidth); back.css({ "left": el.offsetLeft "px", "width": el.offsetWidth "px" }); function move(el) { <br>$back.each(function() { <br>$.dequeue(this, "fx"); } <br>).animate({ <br>width: el.offsetWidth- 40、<br>左: el.offsetLeft <br>}、o.speed、o.fx,function(){ <br>var a0=$(".nav li:eq(0) a"); >var a1=$(".nav li:eq(1) a"); <br>var a2=$(".nav li:eq(2) a"); <br>var a3=$(". nav li:eq(3) a"); <br>var a4=$(".nav li:eq(4) a"); <br>var a5=$(".nav li:eq(5) a"); <br>if(el.offsetLeft==0){ <br>$(".nav li:eq(0) a").css("color","#FFF"); <br>a1.css("色","#000"); <br>a2.css("色","#000"); <br>a3.css("色","#000"); <br>a4.css("カラー","#000"); <br>a5.css("カラー","#000"); <br>} <br>if(el.offsetLeft==92){ <br>$(".nav li:eq(1) a").css("color","#FFF"); <br>a0.css("色","#000"); <br>a2.css("色","#000"); <br>a3.css("カラー","#000"); <br>a4.css("カラー","#000"); <br>a5.css("カラー","#000"); <br>} <br>if(el.offsetLeft==194){ <br>$(".nav li:eq(2) a").css("color","#FFF"); <br>a1.css("色","#000"); <br>a0.css("色","#000"); <br>a3.css("色","#000"); <br>a4.css("カラー","#000"); <br>a5.css("カラー","#000"); <br>} <br>if(el.offsetLeft==296){ <br>$(".nav li:eq(3) a").css("color","#FFF"); <br>a1.css("色","#000"); <br>a2.css("色","#000"); <br>a0.css("色","#000"); <br>a4.css("カラー","#000"); <br>a5.css("カラー","#000"); <br>} <br>if(el.offsetLeft==398){ <br>$(".nav li:eq(4) a").css("color","#FFF"); <br>a1.css("色","#000"); <br>a2.css("色","#000"); <br>a3.css("色","#000"); <br>a0.css("色","#000"); <br>a5.css("カラー","#000"); <br>} <br>if(el.offsetLeft==528){ <br>$(".nav li:eq(5) a").css("color","#FFF"); <br>a1.css("色","#000"); <br>a2.css("色","#000"); <br>a3.css("色","#000"); <br>a4.css("カラー","#000"); <br>a0.css("色","#000"); <br>} <br>}); <br>}; <br><br><br>}); <br><br>}; <br>})(jQuery); <br><br> <br>效果见http://www.uuspeed.com/</div>
