您的位置：首页 > Web前端 > JavaScript

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

2013-12-02 11:25 681 查看

       前些天一直纠结菜单和主页面两个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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： iframe 遮挡 js 菜单 menu

相关文章推荐

新的分享

章节导航

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

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