求高手js

孤独守候 2012-12-31 11:30:33

<html>
<head>
<style>
html,body {
overflow:hidden;
margin:0px;
width:100%;
height:100%;
}
.virtual_body {
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:auto;
}
</style>
</head>
<body>
<div class="virtual_body">
<div>
<iframe id="frame1" src="http://www.baidu.com" width="100%"></iframe>
</div>
<div id='rightDiv' style="background:black;width:500px; border:2px #FF0000 solid;position:absolute; z-index:10000; top:5px; right:0px; display:none;overflow-y:scroll; ">
</div>
</div>
</body>
</html>
想实现这样的一个功能：当移动到div所在的区域时这个div快就会显示，当离开div所在区域时div快就会隐藏，不论是否从iframe上移动div快都可以显示或隐藏，该怎样添加js代码呢，求高手解决？

...全文

411 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

魔术世界中文版 2012-12-31

打赏
举报


<html>
<head>
<style type="text/css">
#div2{
margin-top:50px;
margin-left:250px;
width:450px;
height:300px;
background:#FFFFFF;
border:solid 1px #c3c3c3
}
#div1{
display:none;
margin-top:50px;
margin-left:250px;
width:200px;
padding:40px;
background:#FFFFFF;
border:solid 1px #c3c3c3
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
	$(function(){
		$("#div2").mouseout(function(){$("#div1").hide();}).mouseover(function(){$("#div1").show();});
	})
</script>
</head>
<body>
<div id="div2" class="b">
把鼠标放在上面
<div id="div1" class="a">
区域DIV1中的内容
</div>
</div>

斯洛文尼亚旅游 2012-12-31

打赏
举报

下面的可以，不过无法操作iframe的内容，用透明浮动层浮动在iframe上面就可以出发事件了一定要操作iframe那就没办法了，除非iframe是你自己的页面，没有跨域，自己参考这个修改js代码获取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>

孤独守候 2012-12-31