[英]menu on hover make different effect on other div
I have a menu in a div with 5 elements that has 180px of width each element. 我在5个元素的div中有一个菜单,每个元素的宽度为180px。 And I have a line under this, outside this div, that has an image that has to move depend on which element is hovered.
我在此div外的这条线下有一行图像,该图像必须根据悬浮的元素而移动。
I do this: 5 element with Ids from "#fxmenu_1" to "#fxmenu_5. i have to declare a variable for the number of the id hovered, and move #img with this rule in javascript (Jquery): 我这样做:5个具有从“#fxmenu_1”到“#fxmenu_5”的ID的元素。我必须声明一个用于标识ID的数字的变量,并使用javascript(Jquery)中的此规则移动#img:
margin-left:180px (times #fxmenu_$i) from 1 to 5
margin-left:180px(times#fxmenu_ $ i)从1到5
I know allmost everything of the code, but the variable $i doesnt work at the end with my code, and i think there has to be something better to write. 我几乎了解所有代码,但是变量$ i在我的代码末尾不起作用,我认为必须编写一些更好的东西。 like a var=$"fxmenu_$i"
就像var = $“ fxmenu_ $ i”
This is an Example of the code, there is more in php, but is all i can show you. 这是一个代码示例,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>
with the css is like this link http://jsfiddle.net/rzJMv/ 与CSS像这样的链接http://jsfiddle.net/rzJMv/
This is with the jquery but i want to bring back to normal everything when i stop hovering, or if i hover other element to move to this new point. 这是与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);
});
});
});
});
Would have to see more of your code to be sure but typically variables are used in javascript like so 'margin-left:'+(180*i)+'px'
必须确保查看更多代码,但通常在javascript中使用变量,例如
'margin-left:'+(180*i)+'px'
In the case of php, 'margin-left:'+(180*<?php echo $i; ?>)+'px'
对于php,
'margin-left:'+(180*<?php echo $i; ?>)+'px'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.