注册 登录
编程论坛 JavaScript论坛

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

夜龙魂 发布于 2009-10-16 13:41, 850 次点击
我想做个图片跟到鼠标移动的效果而且移动的时候不能超过浏览器边界
<!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>
这段代码是跟随鼠标移动的代码
我要加上什么才能让他不超过边界
4 回复
#2
xlsxm2009-10-16 16:30
程序代码:
<!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为图片的长宽
#3
夜龙魂2009-10-16 19:40
回复 2楼 xlsxm
你这里只有右边界和下边界没有左边界列
#4
xlsxm2009-10-17 12:13
以下是引用夜龙魂在2009-10-16 19:40:03的发言:

你这里只有右边界和下边界没有左边界列
左边界?按照你的意思还得控制上边界了?在我的IE7中运行,无论怎样移动鼠标,图片是不会超过上边界和左边界,那还控制这两边干嘛?  
#5
aspic2009-10-18 09:01
浏览器又不止你一个IE7~
1