div平滑移动超级难题。。。。。
见识过了水平移动，垂直移动。。
但是貌似斜线平移似乎很有问题。。。。怎么移动啊。。。。没想过
[解决办法]
参考：http://jsfiddle.net/zswang/nxk5A/
<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo by zswang</title> <script type='text/javascript' src='/js/lib/mootools-core-1.4.3-compat.js'></script> <link rel="stylesheet" type="text/css" href="/css/normalize.css"> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <style type='text/css'> #box1{ position: absolute; width: 10px; height: 10px; background: red;} </style> <script type='text/javascript'>//<![CDATA[ window.addEvent('load', function() {var AceGeometric = /^u/.test(typeof exports) ? AceGeometric || {} : exports;void function(exports){ /** * Ace Engine Geometric * 几何函数 * @see http://code.google.com/p/ace-engine/wiki/AceGeometric * @author 王集鹄(wangjihu,http://weibo.com/zswang) * @version 1.0 * @copyright www.baidu.com */ var math = Math, cos = math.cos, sin = math.sin, PI = math.PI, PI2 = PI * 2, min = math.min, max = math.max, atan = math.atan, sqrt = math.sqrt, pow = math.pow; /** * 计算点到点之间的距离 * @param {Array[Number,Number]} a 坐标1 * @param {Array[Number,Number]} b 坐标2 */ function pointToPoint(a, b){ return sqrt(pow(a[0] - b[0], 2) + pow(a[1] - b[1], 2)); } /** * 计算点的角度 * @param {Array} origin 圆心坐标 * @param {Array} point 点坐标 * @param {Number} eccentricity 离心率 */ function pointToAngle(origin, point, eccentricity){ if (/^u/.test(typeof eccentricity)) eccentricity = 1; if (point[0] == origin[0]) { if (point[1] > origin[1]) return PI * 0.5; return PI * 1.5 } else if (point[1] == origin[1]) { if (point[0] > origin[0]) return 0; return PI; } var t = atan((origin[1] - point[1]) / (origin[0] - point[0]) * eccentricity); if (point[0] > origin[0] && point[1] < origin[1]) return t + 2 * PI; if (point[0] > origin[0] && point[1] > origin[1]) return t; return t + PI; } exports.pointToAngle = pointToAngle; exports.pointToPoint= pointToPoint;}(AceGeometric);//==DEMO==void function(){ var box1 = document.getElementById('box1'), currPoint = [0, 0], timer, speed = 5; document.onmousedown = function(e){ e = e || event; timer && clearInterval(timer); // 清楚计时器 newPoint = [e.clientX, e.clientY]; timer = setInterval(function(){ var len = AceGeometric.pointToPoint(currPoint, newPoint); if (len < 1){ // 两点间距离足够小 clearInterval(timer); timer = 0; } else { var angle = AceGeometric.pointToAngle(currPoint, newPoint); currPoint = [currPoint[0] + Math.cos(angle) * Math.min(len / 2, speed), currPoint[1] + Math.sin(angle) * Math.min(len / 2, speed)]; box1.style.left = currPoint[0] + 'px'; box1.style.top = currPoint[1] + 'px'; } }, 50); }}();});//]]> </script></head><body> <div id="box1"></div></body></html>
[解决办法]
<html> <body> <div id="test" style="width:100px;height:100px;position:absolute;border:1px solid red;"> </div> <script> var test = document.getElementById("test"); var width = document.body.clientWidth; var height = document.body.clientHeight; var isDown = true; var isRight = true; var x = 0; var y = 0; var speed = 10; var step = 1; function move() { if(isDown) { y += step; if(y >= (height-parseInt(test.style.height))) { isDown = false; } } else { y -= step; if(y <= 0) { isDown = true; } } if(isRight) { x += step; if(x >= (width-parseInt(test.style.width))) { isRight = false; } } else { x -= step; if(x <= 0) { isRight = true; } } test.style.left = x; test.style.top = y; setTimeout(move,speed); } setTimeout(move,speed); window.onresize = function(e) { width = document.body.clientWidth; height = document.body.clientHeight; } </script> </body></html>