Home > Web Front-end > HTML Tutorial > div block display conflicts with iframe_html/css_WEB-ITnose

div block display conflicts with iframe_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:17:59
Original
1598 people have browsed it



<script> <br> window.onload=function(){ <br> var divObj=document.getElementById("rightDiv"); <br> divObj.style.width=parseInt(document.body.offsetWidth)/3; <br> divObj.style.height=document.body.offsetHeight; <br> var isOverDiv=false; <br> document.body.onmousemove=function(e){ <br> var e=e||window.event; <br> if(parseInt(divObj.style.width)>parseInt(document.body.offsetWidth)-parseInt(e.clientX)){ <br> isOverDiv=true; <br> divObj.style.display=''; <br> } <br> if(parseInt(divObj.style.width)<parseInt(document.body.offsetWidth)-parseInt(e.clientX)&&isOverDiv){ <br /> divObj.style.display='none'; <br /> }  <br /> } <br /> <br /> } <br /> </script>











当我从iframe所在的区域移动到div的边界时,div块并没有显示,求大侠解决,如果大侠可以的话,也顺便可已解决下我下拉右侧滚动条时如何设置div不滑动,同时不闪烁


回复讨论(解决方案)

没办法,因为在iframe中移动时根本就没触发document.body.onmousemove,iframe有不同的区域空间,和父页是分开的

我主要的是想实现这个功能,并不一定需要document.body.onmousemove,只要能实现功能,用什么都可以的

下面的可以,不过无法操作iframe的内容,用透明浮动层浮动在iframe上面就可以出发了

一定要操作iframe那就没办法了,除非iframe是你自己的页面, 获取iframe中鼠标事件在父页的坐标位置

<html><head><script>    window.onload = function () {        var divObj = document.getElementById("rightDiv");        divObj.style.width = parseInt(document.body.offsetWidth) / 3;        divObj.style.height = document.body.offsetHeight;        var isOverDiv = false;        document.body.onmousemove = function (e) {            var e = e || window.event;            if (parseInt(divObj.style.width) > parseInt(document.body.offsetWidth) - parseInt(e.clientX)) {                isOverDiv = true;                divObj.style.display = '';            }            if (parseInt(divObj.style.width) < parseInt(document.body.offsetWidth) - parseInt(e.clientX) && isOverDiv) {                divObj.style.display = 'none';            }        }    }</script></head><body><div ><div id='rightDiv' style="background:black;  border:2px #FF0000 solid;position:absolute; z-index:10000; top:5px; right:0px; display:none; "></div><div style="width:100%;height:100%;position:relative"><div style="position:absolute;width:100%;height:100%;filter:alpha(opacity=0);opacity:0;background:#000"></div><iframe src="http://www.baidu.com" width="100%" ></iframe></div></div></body></html>
Copy after login

Related labels:
source:php.cn
Previous article:About the caching problem of static web pages_html/css_WEB-ITnose Next article:Looking for a beautiful timeout interface,........................_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template