js有没有办法做div的弧线轨迹移动？如y=x的平方

用jquery等插件都行，效果一定要平滑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

2L 怎么了？是不是路径有问题。难道？、？
周围全是MM不敢点了
这个好像不用jq也能做吧.setInterval()就可以了,其中的时间间隔越小就越平滑
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
var i = 1,base = 1;
window.onload = function(){
setInterval(function(){
var div = document.getElementById("block");
div.style.left = i+"px";
div.style.top = base+'px';
i = Math.pow(++base,2);
},500);
};
</script>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#container {
height:1000px;
width:1000px;
border:1px #eee solid;
}
#block {
position:absolute;
width:5px;
height:5px;
background:#000;
}
</style>
</head>
<body>
<div id="container">
<div id="block"></div>
</div>
</body>
</html>
<!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>
<style type="text/css">
#box { width:400px; height:400px; position:relative; margin:200px auto; border:1px solid #000;}
.haha { background:red; width:2px; height:2px; position:absolute; top:0; left:0;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var outer = document.getElementById('box');
var timer = null;
var l = 200;
var t = 30;
var n = 6.2;
timer = setInterval(function(){
if(n < 0) clearInterval(timer);
var oDiv = document.createElement('div');
oDiv.className = 'haha';
outer.appendChild(oDiv);
var x = Math.sin(n);
var y = Math.cos(n);
oDiv.style.left = l*x + 'px';
oDiv.style.top = t*y + 'px';
n-= 0.05;
},10);
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
var i = 1,base = 1;
window.onload = function(){
setInterval(function(){
if(i>1000)
return;
var div = document.getElementById("block");
div.style.left = i+"px";
div.style.top = base+'px';
i = 4*(++base)
},50);
};
</script>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#container {
height:1000px;
width:1000px;
border:1px #eee solid;
}
#block {
position:absolute;
width:5px;
height:5px;
background:#000;
}
</style>
</head>
<body>
<div id="container">
<div id="block"></div>
</div>
</body>
</html>
ｍａｒｋ，看过牛人的jscript 3d动画，很平滑自然，一直不知道如何实现的。
这是按照你的曲线轨迹 y=x的平方做的.为了更好的看轨迹效果,我加了虚线边框.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>movebox</title><style type="text/css">
.move
{
position:absolute;
}
.container
{
width:700px;
height:700px;
border:dotted 2px;
}
</style>
</head>
<body>
<div class="container">
<div class="move" id="box">
    <img src="http://avatar.profile.csdn.net/D/8/7/2_cj205.jpg" alt="" />
</div>
</div>
<button onclick="movebox.stop()">click</button>
<script type="text/javascript">
var movebox = {};
movebox.x = 0;
movebox.y = 0;
movebox.dx = 0.3;
movebox.dy = null;
movebox.timer = null;movebox.next = function(){
    var obj = document.getElementById('box');    if (movebox.x + movebox.dx > 600 || movebox.x + movebox.dx < 0 ) movebox.dx = -movebox.dx;
    movebox.x += movebox.dx;
    movebox.dy = 1/300 * movebox.x * movebox.dx;
    if (movebox.y + movebox.dy > 600 || movebox.y + movebox.dy < 0 ) movebox.dy = -movebox.dy;
    movebox.y += movebox.dy;
    obj.style.left = movebox.x + 'px';
    obj.style.top = movebox.y + 'px';
};movebox.timer = setInterval(movebox.next,1);movebox.stop = function(){
    clearInterval(movebox.timer);
};</script>
</body>
</html>