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
- WBOYOriginal
- 2016-06-24 12:17:591599browse
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
3f1c4e4b6b16bbbd69b2ee476dc4f83a
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)65f1efce65ce28c59a39555765db6319
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
2c5a1dfb598f3ddab01ba91b44d841ab
f2efb4cbc5ba74c547098fb73e25c372
16b28748ea4df4d9c2150843fecfba68
2d6edf1ec9c0812bb9ebd135a1ec96ec
35921f7889b706d76b1fdef1d2dc9603065276f04003e4622c4fe6b64f465b88
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
当我从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>