Question

我在div中有一个菜单，其中包含5个元素，每个元素的宽度为180px。在这个div之外我有一条线，它有一个必须移动的图像取决于哪个元素悬停。

我这样做：5个元素，ID从“＃fxmenu_1”到“＃fxmenu_5。我必须声明一个变量作为id hovered的数量，并在javascript（Jquery）中使用此规则移动#img：

margin-left：180px（次＃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);
                });
        });
    });
});

http://jsfiddle.net/rzJMv/1/

Answer 1

必须看到更多代码才能确定，但通常会在javascript中使用变量'margin-left:'+(180*i)+'px'

对于php，'margin-left:'+(180*<?php echo $i; ?>)+'px'

悬停菜单对其他div产生不同的影响

1 个答案: