JS:跟随鼠标移动的图片，兼容IE与DOM浏览器（已在实际中用懂啊）

最新推荐文章于 2023-06-18 10:33:25 发布

盼儿哥

最新推荐文章于 2023-06-18 10:33:25 发布

阅读量946

点赞数

分类专栏： C#

C# 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

http://blog.sina.com.cn/s/blog_48e6792c0100z8ie.html

基本设计思路：

1、首先捕捉鼠标的移动，获取鼠标当前位置坐标（clientX和clientY属性）,这一点通过事件对象得到；

2、获取图片当前的位置；

3、比较图片当前位置与鼠标当前位置坐标，修改图片当前位置（left和top属性），移动图片。移动时，如果图片当前位置坐标大于鼠标当前位置坐标，则将图片位置坐标减小，否则将图片位置坐标增加，直至图片坐标与鼠标坐标相等。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跟随鼠标移动的图片</title>
<script type="text/javascript">
var mouse_x = 0;
var mouse_y = 0;  //鼠标坐标
var img_x =0;
var img_y = 0;  //图片坐标
var move_to_x = 0;
var move_to_y = 0;  //移动目标位置坐标
var step = 5;            //图片每次移动距离
var interval = 10;         //间隔时间移动
var scroll_x;
var scroll_y; //页面在水平、垂直方向上已经滚动的距离
var image_width;
var image_height;
function getPos(e){
  
 scroll_x = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollLeft;
 scroll_y = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop;
 //获取窗口大小
 win_width = windows.innerWidth ? windows.innerWidth : document.body.clientWidth;
 win_height = windows.innerHeight ? windows.innerHeight : document.body.clientHeight;
 
 
 //图片尺寸
 image_width =  document.getElementByIdx_x("image_id").width;
 image_height = document.getElementByIdx_x("image_id").height;
 
 
 //获取鼠标所在位置
 e = e ? e : event
 mouse_x = e.clientX;
 mouse_y = e.clientY;
 
 //计算move_to_x,move_to_y值，为图片指定移动边界，避免图片移动到窗口外
 if(mouse_x < 2)
 {
  move_to_x = scroll_x + 2;
 }
 else if(mouse_x > win_width - image_width - 20)
 {
  move_to_x = scroll_x + win_width - image_width - 20;
 }
 else
 {
  move_to_x = scroll_x + mouse_x;
 }
 
 if(mouse_y < 2)
 {
  move_to_y = scroll_y + 2;
 }
 else if(mouse_y > win_height - image_height - 20)
 {
  move_to_y = scroll_y + win_height - image_height - 20;
 }
 else
 {
  move_to_y = scroll_y + mouse_y;
 }
 
 return;           //移动图片
}
function moveImage(){
 var img = document.getElementByIdx_x("div_id");
 //图片当前位置
 img_x = parseInt(img.style.left);
 img_y = parseInt(img.style.top);
 
 //比较目标位置与图片当前位置，若不等，将img_x按 step距离计算，重新赋值给img.style.left;
 if(Math.abs(move_to_x - img_x) > 5)
 {
  img_x += step * ((move_to_x - img_x > 5) ? 1 : -1);
  img.style.left = img_x + "px";
 }
    if(Math.abs(move_to_y - img_y) > 5)
 {
  img_y += step * ((move_to_y - img_y > 5) ? 1 : -1);
  img.style.top = img_y + "px";
 }
 setTimeout("moveImage()",interval);
}
</script>
</head>
<body id="id_body"  οnlοad="moveImage()" οnmοusemοve="getPos(event)">
<div id="div_id" style="position:absolute; left:0px; top:0px; z-index:10;">
<img id="image_id" src="images/gkbm.gif" />
</div>
<table height="1000px" style="background:#ccc">
<tr>
<td></td>
</tr>
</table>
</body>
</html>