关闭

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

标签: iframe遮挡js菜单menu
1924人阅读 评论(0) 收藏 举报
分类:

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5933次
    • 积分:95
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档