各要素の幅が 180 ピクセルの 5 つの要素を持つ div にメニューがあります。そして、この div の外のこの下に、どの要素がホバーされているかに応じて移動する必要がある画像がある行があります。
私はこれを行います: "#fxmenu_1" から "#fxmenu_5" までの ID を持つ 5 つの要素。ホバーした ID の番号の変数を宣言し、javascript (Jquery) でこのルールを使用して #img を移動する必要があります。
margin-left:180px (x #fxmenu_$i) 1 ～ 5
私はコードのほとんどすべてを知っていますが、変数 $i は私のコードでは最後に機能しません。もっと良いものを書く必要があると思います。var=$"fxmenu_$i" のように
これはコードの例です。php には他にもありますが、お見せできるのはこれだけです。
<div id="pmenu">
<ul id="bmenul">
<li>
<a class="brand" id="fxmenu1_" href="/"><img src="/logomenu.png" />LOGO</a>
</li>
<li>
<a id="fxmenu_2" href="/team" title="team">The team</a>
</li>
<li>
<a id="fxmenu_3" href="/services" title="Servicios">Services</a>
</li>
<li>
<a id="fxmenu_4" href="/projects" title="Proyectos">Projects</a>
</li>
<li>
<a id="fxmenu_5" href="/contact" title="Contacto">Contact</a>
</li>
</ul>
<div id="bar">
<img id="img" src="/efect.png" />
</div>
</div>
CSSを使用すると、このリンクのようになりますhttp://jsfiddle.net/rzJMv/
これはjqueryを使用していますが、ホバリングを停止したとき、または他の要素をホバーしてこの新しいポイントに移動したときに、すべてを通常に戻したいと考えています。
$(document).ready(function(){
var id;
$('#fxmenu_'+id+':not(.totalactive)').hover(function (){
$('#img').animate({"marginTop": "-70px"},1000, function(){
$('#img').animate({"marginLeft":+(180*id)+"px"},1000, function(){
$('#img').animate({"marginTop": "-90px"},1000);
});
});
});
});