0

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

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

margin-left:180px (times #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/

4

1 回答 1

0

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

在 php 的情况下，'margin-left:'+(180*<?php echo $i; ?>)+'px'

于 2012-12-02T20:26:30.440 回答