JS图片跟随鼠标每秒缓慢移动直到到达鼠标位置后停止

拜托各路高手帮我解决这个问题，我思路不好，以下代码我已弄好，就是我鼠标移到到哪红色DIV就跟到哪，跟随鼠标过程中，红色DIV是以每秒速度缓慢移动到鼠标位置的，而不是鼠标到... 拜托各路高手帮我解决这个问题，我思路不好，以下代码我已弄好，就是我鼠标移到到哪红色DIV就跟到哪，跟随鼠标过程中，红色DIV是以每秒速度缓慢移动到鼠标位置的，而不是鼠标到哪红色DIV就立刻到哪那种...

<!DOCTYPE html>
<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 x="";
var y="";
var Left = 0;
var Right = 0;
document.onmousemove = Mouse1;
function Mouse1(event){
x=event.clientX;
y=event.clientY;
document.title=x;
var timer = setInterval(function(){
document.getElementById("mouse").style.top=(y-100)+"px";
document.getElementById("mouse").style.left=(x-100)+"px";
},1000);
}
</script>
</head>

<body>
<div id="wrap" style="width:950px; height:610px; border:1px solid #000; margin:auto;"></div>
<div id="mouse" style="width:30px; height:30px; background:#F00; position:absolute; top:0; left:0; right:0;"></div>
</body>
</html> 展开

 我来答

1个回答

#合辑# 面试问优缺点怎么回答最加分？

匿名用户
2015-01-01

展开全部

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="白菜编辑部">
<title>白菜编辑部</title>
<style>
div#wrap {
	margin: auto;
	width: 950px;
	height: 610px;
	border: 1px solid #000;
	cursor: pointer;
}

div#mouse {
	position: absolute;
	width: 30px;
	height: 30px;
	background: #F00;
	left: 158px;
	top: 9px;
}
</style>
<script type="text/javascript">
	document.onmousemove = function (e)
    {
	    e = e || window.event;
	    x = e.clientX;
	    y = e.clientY;
	    var me = this;
	    !me.coordinates ? me.coordinates = [] : 0;
	    me.coordinates.push (
	    {
	        x : x,
	        y : y
	    });
	    me.index = null != me.index ? me.index : 0;
	    clearInterval (me.interval);
	    var temp = /.*chrome.*/i.test (navigator.userAgent) ? me.body : me.documentElement;
	    me.interval = setInterval (function ()
	    {
		    var left = me.coordinates[me.index].x + temp.scrollLeft - mouse.clientWidth / 2;
		    left = left < wrap.offsetLeft ? wrap.offsetLeft : left;
		    left = left > wrap.offsetLeft + wrap.clientWidth - mouse.clientWidth ? wrap.offsetLeft + wrap.clientWidth
		            - mouse.clientWidth : left;
		    
		    var top = me.coordinates[me.index].y + temp.scrollTop - mouse.clientHeight / 2;
		    top = top < wrap.offsetTop ? wrap.offsetTop : top;
		    top = top > wrap.offsetTop + wrap.clientHeight - mouse.clientHeight ? wrap.offsetTop + wrap.clientHeight
		            - mouse.clientHeight : top;
		    
		    mouse.style.left = left + 'px';
		    mouse.style.top = top + 'px';
		    me.title = left + ',' + top;
		    me.index++;
		    if (me.index > me.coordinates.length - 1)
		    {
			    clearInterval (me.interval);
			    me.index = 0;
			    me.coordinates = [];
		    }
	    }, !!me.sleep ? me.sleep : me.sleep = 16);
    };
</script>
</head>
<body>
	<div id="wrap"></div>
	<div id="mouse"></div>
</body>
</html>

追问

谢谢你的解答，感激不尽，能否方便留下QQ号，我想拜你为师

追答

嗯

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

JS图片跟随鼠标每秒缓慢移动直到到达鼠标位置后停止

其他类似问题

为你推荐：