我想做个图片跟到鼠标移动的效果而且移动的时候不能超过浏览器边界 - JavaScript论坛

已结贴√ 问题点数：20 回复次数：4

我想做个图片跟到鼠标移动的效果而且移动的时候不能超过浏览器边界

我想做个图片跟到鼠标移动的效果而且移动的时候不能超过浏览器边界
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<STYLE type=TEXT/CSS>
.tm {
FILTER: Alpha(Opacity=50)
}
</STYLE>
<DIV id=Layer1 style="HEIGHT: 31px; LEFT: 409px; POSITION: absolute; TOP: 131px; WIDTH: 14px"><IMG class=tm src="LOGO.jpg"></DIV>
<SCRIPT>
function move_layer()
{
Layer1.style.left=event.clientX+document.body.scrollLeft+-10;
Layer1.style.top=event.clientY+document.body.scrollTop+-5;
top.status="鼠标X="+event.clientX + " sX=" + document.body.scrollLeft + " 鼠标Y=" + event.clientY+ " sY=" + document.body.scrollTop;
}
document.onmousemove =move_layer;
</SCRIPT>
</body>
</html>
这段代码是跟随鼠标移动的代码
我要加上什么才能让他不超过边界

搜索更多相关主题的帖子: 鼠标　浏览器　效果　

第 2 楼

得分:20

程序代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html xmlns="http://www. 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
</head> 
 
<body> 
<STYLE type=TEXT/CSS> 
.tm { 
FILTER: Alpha(Opacity=50) 
} 
</STYLE> 
<DIV id=Layer1  style="HEIGHT: 31px; LEFT: 409px; POSITION: absolute; TOP: 131px; WIDTH: 14px"><IMG  class=tm src="LOGO.jpg"></DIV> 
<SCRIPT LANGUAGE="JavaScript"> 
function move_layer() 
{ 
  var eX=event.clientX; 
  var eY=event.clientY; 
  if(event.clientX>document.body.clientWidth-180) 
  { 
     eX=document.body.clientWidth-180; 
  } 
  if(event.clientY>document.body.clientHeight-60) 
  { 
      eY=document.body.clientHeight-60; 
  } 
  Layer1.style.left=eX+document.body.scrollLeft+-10; 
  Layer1.style.top=eY+document.body.scrollTop+-5; 
  top.status="鼠标X="+eX + " sX=" + document.body.scrollLeft + " 鼠标Y=" + eY+ "  sY=" + document.body.scrollTop; 
   
} 
document.onmousemove =move_layer; 
</SCRIPT>  
</body> 
</html>

加两判断就行了，要更好的效果，可以自己再改改。其中180，60为图片的长宽