1
我试图自己做这件事,但我无法完全按照我希望的方式工作。它假设重新排列右边的div堆栈淡出当前div,并在菜单上的mouseover和mouseout上淡化下一个div。这是我的代码部分工作。请有人帮我解决这个问题。这里是上的jsfiddle http://jsfiddle.net/FBLxT/ 如果moseover菜单来回颜色不太匹配Z-Index更改堆栈顺序FadeIn FadeOut
(function ($) {
$.fn.Menu = (function() {
function rotateZindex(currentPanel) {
var numOfPanels = $('#menu-container div').length;
currentPanel = parseInt(currentPanel, 10) % numOfPanels;
//alert(numOfPanels);
$('#menu-container div').eq(currentPanel).fadeOut(function() {
$('#menu-container div').each(function (i) {
$(this).css({ 'z-index': ((numOfPanels - i) + currentPanel) % numOfPanels });
});
$(this).css({ 'visibility': 'visible' });
$(this).show();
});
}
$(this).each(function() {
$('.menu-item').each(function() {
$(this).mouseover(function() {
rotateZindex($(this).attr('rel'));
});
});
});
});
})(jQuery);
$(document).ready(function() {
$('.menu').Menu();
});
<style type="text/css">
#menu-container {visibility:hidden}
</style>
<div>
<table cellspacing="5">
<tr>
<td valign="top">
<div class="RibbinMenu">Menu</div>
<div class="menu" style="width:200px; margin-right:20px">
<div class="menu-item" rel="1" style="height:30px; background:Aqua">Some Text</div>
<div class="menu-item" rel="2" style="height:30px; background:Blue">Some Text</div>
<div class="menu-item" rel="3" style="height:30px; background:Fuchsia">Some Text</div>
<div class="menu-item" rel="4" style="height:30px; background:Gray">Some Text</div>
<div class="menu-item" rel="5" style="height:30px; background:Green">Some Text</div>
<div class="menu-item" rel="6" style="height:30px; background:Lime">Some Text</div>
<div class="menu-item" rel="6" style="height:30px; background:Maroon">Some Text</div>
</div>
</td>
<td valign="top">
<div id="menu-container"">
<div id="1"
style="width:200px; height:300px; margin-left:2px; border-left:1px solid #8a909a; background-color:Aqua; z-index:1">
</div>
<div id="2"
style="width:180px; height:280px; margin-left:2px; border-left:1px solid #8a909a; background-color:Blue; z-index:2">
</div>
<div id="3"
style="width:160px; height:260px; margin-left:2px; border-left:1px solid #8a909a; background-color:Fuchsia; z-index:3">
</div>
<div id="4"
style="width:140px; height:240px; margin-left:2px; border-left:1px solid #8a909a; background-color:Gray; z-index:4">
</div>
<div id="5"
style="width:120px; height:220px; margin-left:2px; border-left:1px solid #8a909a; background-color:Green; z-index:5">
</div>
<div id="6"
style="width:100px; height:200px; margin-left:2px; border-left:1px solid #8a909a; background-color:Lime; z-index:6">
</div>
<div id="7"
style="width:80px; height:180px; margin-left:2px; border-left:1px solid #8a909a; background-color:Maroon; z-index:7">
</div>
</div>
</td>
</tr>
</table>
</div>
谢谢这是我一直在尝试做的事情。一直把我的头发拉出来。我无法在最后一次尝试时设置CSS索引,但是我的逻辑朝着正确的方向发展 – ONYX 2011-04-27 09:27:52