js有没有办法干div的弧线轨迹移动？如y=x的平方
日期：2014-05-16 浏览次数：20336 次
js有没有办法做div的弧线轨迹移动？如y=x的平方
用jquery等插件都行，效果一定要平滑
------解决方案--------------------
用jquery等插件都行，效果一定要平滑
------解决方案--------------------
- HTML code
<!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>
------解决方案--------------------
- HTML code
<!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的平方 做的.
为了更好的看轨迹效果,我加了虚线边框.
- HTML code
<!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.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
