• js鼠标滑过弹出层的定位bug解决办法(转)


    大家在写div+css的时候经常会用到弹出层,由于IE6的bug,所以当使用多个标签重复写弹出层的时候会遇到后面的层压在了弹出层的上面,这种问题在火狐浏览器下可以用z-index来解决,但是在IE6下面是不起作用的,下面的代码给大家提供了一种此类问题的解决办法,原理如下:用Jquery给弹出层的z轴依次增加高度.代码很简单,效果很显著,吼吼!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>弹出层问题的解决办法</title>
    <style>
    .box { 800px; margin:10px auto; background:#f1f1f1; z-index:0; padding:10px;display:inline-table; text-align:center;}
    .box ul li { 150px; height:150px; float:left; border:solid 1px #ccc; background:#CCFF99; margin:10px; position:relative; list-style:none;}
    .box ul li .layer { position:absolute; left:150px; top:0; 120px; height:100px; background:#000; color:#fff; z-index:99999;}

    </style>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>

    </head>
    <body>
    <div class="box">
     <ul id="boxcotent">
      <li><a href="#">测试新闻标题一</a>
       <div class="layer" style=" display:none;">
        <a href="#">这里显示弹出层</a>
       </div>
      </li>
      <li><a href="#">测试新闻标题一</a>
       <div class="layer" style=" display:none;">
        <a href="#">这里显示弹出层</a>
       </div>
      </li>
      <li><a href="#">测试新闻标题一</a>
       <div class="layer" style=" display:none;">
        <a href="#">这里显示弹出层</a>
       </div>
      </li>
      <li><a href="#">测试新闻标题一</a>
       <div class="layer" style=" display:none;">
        <a href="#">这里显示弹出层</a>
       </div>
      </li>
      <li><a href="#">测试新闻标题一</a>
       <div class="layer" style=" display:none;">
        <a href="#">这里显示弹出层</a>
       </div>
      </li>
      <li><a href="#">测试新闻标题一</a>
       <div class="layer" style=" display:none;">
        <a href="#">这里显示弹出层</a>
       </div>
      </li>
      <li><a href="#">测试新闻标题一</a>
       <div class="layer" style=" display:none;">
        <a href="#">这里显示弹出层</a>
       </div>
      </li>
     </ul>
    </div>
    <script type="text/javascript">
     for(var i = 0; i < $(".box li").length;i++){
      var j = 10000-i
      $(".box li").eq(i).css("z-index",j);
     }
     $("#boxcotent li").hover(function(){
      $(this).children(".layer").show();},function(){$(this).children(".layer").hide();}
      );
      $("#boxcotent li").hover(function(){
      $(this).addClass("s");},function(){$(this).removeClass("s");}
     );
    </script> 
    </body>
    </html>

    以上JS代码需要引入jquery-1.3.2.min.js文件

    关键JS代码

     for(var i = 0; i < $(".box li").length;i++){
      var j = 10000-i
      $(".box li").eq(i).css("z-index",j);
     }

  • 相关阅读:
    Find cmd
    splitFile2SmallFile
    IPC-->PIPO
    Thread and shared lock
    Python Thread related
    linux 文件系统
    linux commands
    关于 gnome3 无法显示应用程序所有界面的反馈
    Windows 网络编程
    常见端口 HTTP代码
  • 原文地址:https://www.cnblogs.com/zhwl/p/2382249.html
Copyright © 2020-2023  润新知