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

veardn 2011-01-11 05:32:18

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

...全文

527 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

汉尼拔 2011-01-12

打赏
举报

这是按照你的曲线轨迹 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>

smartcatiboy 2011-01-11

打赏
举报

ｍａｒｋ，看过牛人的jscript 3d动画，很平滑自然，一直不知道如何实现的。

Mr-Jee 2011-01-11

打赏
举报

<!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>

zjhsd2007 2011-01-11

打赏
举报

<!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>

Mr-Jee 2011-01-11

打赏
举报

<!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>