js有没有办法做div的弧线轨迹移动？如y=x的平方
用jquery等插件都行，效果一定要平滑
[解决办法]
<!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>
[解决办法]
这是按照你的曲线轨迹 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>