div平滑移动超级难题。解决办法
日期：2014-05-16 浏览次数：20443 次
div平滑移动超级难题。。。。。
见识过了水平移动，垂直移动。。
但是貌似斜线平移似乎很有问题。。。。怎么移动啊。。。。没想过
------解决方案--------------------
参考：http://jsfiddle.net/zswang/nxk5A/
见识过了水平移动，垂直移动。。
但是貌似斜线平移似乎很有问题。。。。怎么移动啊。。。。没想过
------解决方案--------------------
参考：http://jsfiddle.net/zswang/nxk5A/
- HTML code
<!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>
------解决方案--------------------
- JScript code
<html>
<body>
<div id="test" style="width:100px;height:100px;position:absolute;border:1px solid red;">
</div>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
