Javascript Jquery菜单shift/overlap div节图像_Javascript_Jquery_Html_Css

Javascript Jquery菜单shift/overlap div节图像

javascript jquery html css

Javascript Jquery菜单shift/overlap div节图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我是网络编程新手，所以任何建议对我来说都是巨大的财富我尝试使用jquery创建菜单和图像滑动，但该菜单与chrome中的图像和IE中的shift div部分重叠代码结果我还附上了示例代码 <html> <head> <style type="text/css" > body{background:#534741;font-family:Arial, Helvetica, sans-serif; font-size:12px;} ul, li{ma

我是网络编程新手，所以任何建议对我来说都是巨大的财富

我尝试使用jquery创建菜单和图像滑动，但该菜单与chrome中的图像和IE中的shift div部分重叠

代码

结果

我还附上了示例代码

<html>
<head>
<style type="text/css" >

body{background:#534741;font-family:Arial, Helvetica, sans-serif; font-size:12px;} 
ul, li{margin:0; padding:0; list-style:none;}  

.menu_head{border:1px solid #998675;}  
.menu_body {width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body li{background:#493e3b;}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;} 
.menu_body li.alt{background:#362f2d;}  
.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;} 
.menu_body li a:hover{padding:15px 10px; font-weight:bold;}  
                                                #slideshow { 
                                                            margin: 50px auto; 
                                                            position: relative; 
                                                            width: auto; 
                                                            height: auto; 
                                                            padding: 10px; 
                                                            box-shadow: 0 0 20px rgba(0,0,0,0.4); 
                                                        }

                                                        #slideshow > div { 
                                                            position: absolute; 
                                                            top: 10px; 
                                                            left: 10px; 
                                                            right: 10px; 
                                                            bottom: 10px; 
                                                        }

</style>  

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {  
$("ul.menu_body li:even").addClass("alt");
$('img.menu_head').click(function () {  
$('ul.menu_body').slideToggle('medium');
});

$('ul.menu_body li a').mouseover(function () { 
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 ); 
});

$('ul.menu_body li a').mouseout(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});

$(function(){
$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);
});

});    
</script>  
</head>
<body style="margin:auto;">
<div style="width:1000px; height:600px; margin:20px;">
<div style="width:auto; height:100px">

<img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcQNrzbTsg60SbbpFVCI-Mt7gq6V6W3lSvFQznvZiuRUAP1Rh1pt" width="184" height="32" class="menu_head" alt="Click"/><br>  
<ul class="menu_body">
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li> 
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li> 
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li> 
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li> 
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li> 
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li> 
  <li><a href="#">AAAAAAAA</a></li>  
  <li><a href="#">AAAAAAAA</a></li>  
</ul>  
</div>
<div style="width:auto; height:100px; background-color:white;">
<div id="maindiv221">
<div id="slideshow">
   <div>
     <img src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcRxhQOGp29MxjxwtL97VTm2lzyYYvOSLoOiMo3uWJFdBm91gMJjPvSD7Ag" alt="1">
   </div>
   <div>
     <img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcQvTJ-sdmw9EjrrL7j9izN3IavFusBzfvlc_Ow9as6TNfdfvr88" alt="2">
   </div>
   <div>
     <img src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTt4CqLzoaI9ehHYZs-B1eo8X-5qoMdaiRd6juWKmoFfwrmoK8Urg" alt="3">
   </div>
</div>

</div>
</body>
</html>


正文{背景：#534741；字体系列：Arial，Helvetica，无衬线；字体大小：12px；}
ul，li{margin:0；padding:0；列表样式：none；}
.menu_head{边框：1px实心#998675；}
.menu#body{宽度：184px；边框右侧：1px solid#998675；边框底部：1px solid#998675；边框左侧：1px solid#998675；}
.menu_body li{背景：#493e3b；}
.menu_body li a{color:#FFFFFF；文本装饰：无；填充：10px；显示：块；}
.menu_body li.alt{background:#362f2d；}
.menu#body{显示：无；宽度：184px；边框右侧：1px实心#998675；边框底部：1px实心#998675；边框左侧：1px实心#998675；}
.menu_body li a:hover{padding:15px 10px；font-weight:bold；}
#幻灯片放映{
保证金：50px自动；
位置：相对位置；
宽度：自动；
高度：自动；
填充：10px；
盒影：0.20px rgba（0,0,0,0.4）；
}
#幻灯片>div{
位置：绝对位置；
顶部：10px；
左：10px；
右：10px；
底部：10px；
}
$（文档）.ready（函数（）{
$（“ul.menu_body li:偶数”）.addClass（“alt”）；
$（'img.menu_head'）。单击（函数（）{
$（'ul.menu_body'）。滑动切换（'medium'）；
});
$（'ul.menu_body li a'）.mouseover（函数（）{
制作动画（{fontSize:“14px”，paddingLeft:“20px”}，50）；
});
$（'ul.menu_body li a'）.mouseout（函数（）{
动画（{fontSize:“12px”，paddingLeft:“10px”}，50）；
});
$（函数（）{
$（“#幻灯片>div:gt（0）”）.hide（）；
setInterval（函数（）{
$（“#幻灯片>分区：第一个”）
.衰减（1000）
.next（）
法丹先生（1000）
(完)
.appendTo（“#幻灯片”）；
},  3000);
});
});

在

.menu\u body

类中，将此代码添加到

CSS

部分

z-index: 999999;
position:relative;

菜单的Z索引必须大于其他元素中的Z索引。z指数越大的元素越接近我们。检查有关z索引的此链接：

注：z索引仅适用于具有非静态位置的元素。（相对、绝对和固定位置）。

在

.menu\u body

类将此代码添加到

CSS

部分

z-index: 999999;
position:relative;

菜单的Z索引必须大于其他元素中的Z索引。z指数越大的元素越接近我们。检查有关z索引的此链接：

注：z索引仅适用于具有非静态位置的元素。（相对、绝对和固定位置）。

谢谢，zindex解决了我在chrome中的问题，但我无法在IE中解决问题，它将图像div向下移动到fit菜单。（如果我将此示例代码添加到普通html文件并打开该html文件。）谢谢，zindex解决了我在chrome中的问题，但我无法解决IE中的问题，它将图像div向下移动到fit菜单。（如果我将此示例代码添加到普通html文件并打开该html文件。）