js实现 菜单iframe与主页面iframe 重叠 防止互相遮挡 代码参考

       前些天一直纠结菜单和主页面两个iframe的互相重叠问题,本来以为解决菜单的遮罩就够了,没想到子菜单与主页面重叠的部分因为被遮挡而无法执行相应的鼠标事件,遂上网寻找解决办法,并根据一哥们的思路实现了通过鼠标的移动实现界面z-index的互相切换,代码展示的只是一个思路,希望对大家有帮助~

页面a.html

<body>   
    <iframe id="x" src="Menu.aspx" frameborder="0" scrolling="no" width="1300px" height="200px" style="position:absolute;top:80px;left:315px;z-Index:-1;"></iframe>


    <iframe id="y"  src="MainPage.aspx" frameborder="0" scrolling="no" style="position:absolute;width:1300px;height:800px;z-index:1; top: 250px; left: 100px;"></iframe>
  
</body>

<script type="text/javascript">
    function ChangeZIndex1() {
        document.getElementById("x").style.zIndex=1;
        document.getElementById("y").style.zIndex = -1;
    }
    function ChangeZIndex2() {
        document.getElementById("Menu").style.zIndex = -1;
        document.getElementById("MapRegion").style.zIndex = 1;
    }
</script>


页面x.aspx

<body onmouseenter="parent.ChangeZIndex1()" onmouseleave="parent.ChangeZIndex2()">

</body>


阅读更多
个人分类: js
下一篇ASP.net 关于TextBox的TextMode=“PassWord”时的动态赋值
想对作者说点什么? 我来说一句

解决下拉菜单iframe遮住问题

2014年07月28日 10KB 下载

没有更多推荐了,返回首页

关闭
关闭