> 웹 프론트엔드 > HTML 튜토리얼 > div块显示和iframe冲突_html/css_WEB-ITnose

div块显示和iframe冲突_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:17:59
원래의
1590명이 탐색했습니다.



<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>
로그인 후 복사

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿