这段代码为什么老是会不停的刷新?我没有刷新的代码啊,好奇怪

upshania 2009-12-15 02:32:24

<html>

<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}
</style>
<body>
<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
<img src="/uploadfile/200806/17/98183720747.jpg">
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");

demo.onmousemove = function(event){
event = event || window.event;
ei.style.display = "block";
ei.innerHTML = '<div><iframe src="http://www.163.com" /></div>';
ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";

}
demo.onmouseout = function(){
ei.innerHTML = "";
ei.style.display = "none";
}

</script>
</body>
</html>

...全文

96 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

liu2835993 2009-12-15

打赏
举报

1、时间上：onmousemove事件触发后，再触发onmouseover事件。

2、按钮上：不区分鼠标按钮。

3、动作上：onmouseover只在刚进入区域时触发，onmousemove除了刚进入区域触发外，在区域内移动鼠标，也会触发该事件；当鼠标移动很快时，可能不会触发这两个事件。

一般鼠标事件使用onmouseover对应onmouseout事件

===========================================

注：貌似没有移动也不停的闪烁...4楼的方法可以解决楼主问题

chollaflower 2009-12-15

打赏
举报

[Quote=引用 4 楼 cntmi 的回复:]
把onmousemove 改成onmouseover 就可以了

HTML code<html><style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}</style><body><divid="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px"><imgsrc="/uploadfile/200806/17/98183720747.jpg"></div><divid="enlarge_images"></div><script>var demo= document.getElementById("demo");var gg= demo.getElementsByTagName("img");var ei= document.getElementById("enlarge_images");

demo.onmouseover=function(event){
event= event|| window.event;
ei.style.display="block";
ei.innerHTML=' <div> <iframe src="http://www.qq.com" /> </div>';
ei.style.top= document.body.scrollTop+ event.clientY+10+"px";
ei.style.left= document.body.scrollLeft+ event.clientX+10+"px";

}
demo.onmouseout=function(){
ei.innerHTML="";
ei.style.display="none";
}</script></body></html>
[/Quote]
顶！onmousemove移动一个像素都会触发，只要鼠标在动

cntmi 2009-12-15

打赏
举报

把onmousemove 改成onmouseover 就可以了



<html> 



<style> 

#demo{overflow:hidden;width:120px;text-align:center;padding:10px;} 

#demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4} 

#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4} 

</style> 

<body> 

<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px"> 

<img src="/uploadfile/200806/17/98183720747.jpg"> 

</div> 

<div id="enlarge_images"> </div> 

<script> 

var demo = document.getElementById("demo"); 

var gg = demo.getElementsByTagName("img"); 

var ei = document.getElementById("enlarge_images"); 



demo.onmouseover = function(event){ 

  event = event || window.event; 

  ei.style.display = "block"; 

  ei.innerHTML = ' <div> <iframe src="http://www.qq.com" /> </div>'; 

  ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px"; 

  ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px"; 

  

} 

demo.onmouseout = function(){ 

  ei.innerHTML = ""; 

  ei.style.display = "none"; 

} 





</script> 

</body> 

</html>