JavaScript画椭圆曲线

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset=gbk>
<title>椭圆曲线</title>
</head>
<style>
*{
margin:0px;padding:0px;	
}
div{
border:1px solid #111;
}
.points{
width:1px;height:1px;border:0px solid #111;
position:absolute;
line-height:1px;font-size:1px;
background:#111;
}
.go-oval{
width:10px;height:10px;border:0px solid #111;
position:absolute;
line-height:1px;font-size:1px;
background:#111;
border-radius:5px;
}
</style>
<body>
	<div style="position:absolute;left:80px;top:30px;height:500px;width:500px;">
		<div id="tuoyuan1" style="height:500px;width:500px;"></div>
		<div id="go-oval1" class="go-oval"></div>
	</div>
	<div style="position:absolute;left:800px;top:130px;height:500px;width:900px;">
		<div id="tuoyuan2" style="height:500px;width:900px;"></div>
		<div id="go-oval2" class="go-oval"></div>
	</div>
</body>
</html>
<script>
(function(){
	function $(idd){
		var obj = {};
		if( typeof( idd ) === 'string'){
			var idName = idd.substr(1, idd.length );
			//alert(idName)
			if( idd.substr(0,1) === '#' ){
				obj = document.getElementById(idName);
			}
			else if( idd.substr(0,1) === '.'){
				obj =  document.getElementsByName(idName);
				//obj = obj.length ? document.getElementsByClassName(idName) : null;
				//alert(obj.length);
				//alert( obj[0].className )
			}
			else if( idd == 'document' ){
				obj = document;
			}
			else {
				obj = document.getElementsByTagName(idd);
				//alert(idd)
			}
		}
		else {
			obj = idd;
		}
		return obj;
	}
	//alert(document.body.clientWidth  )
	//生成椭圆曲线的点（数组）
	function make_points(a, b, interval, addX, addY){
		var x,y;
		var xy = [],xy1 = [],xy2 = [];
		
		addX = addX ? addX : a;
		addY = addY ? addY : b;
		
		x = - Math.sqrt( (b*b)*a*a/(b*b) );
		
		for(var n = 0; 1; n ++){
			y = Math.sqrt( b*b - (b*b*x*x)/(a*a) );
			
			if( n == 0 ){
				y0 = y;
			}
			
			xy1[n] = [x + addX,y + addY];
			//n++;
			xy2[n] = [x + addX,-y + addY];
			x = x + interval;
			
			if( x > Math.sqrt( (b*b)*a*a/(b*b) ) ){
				break;
			}
		}
		
		//xy2倒序
		/*
		xy2 = xy2.sort(function(x,y){
			 return x == y ? 0 : (x > y ? -1 : 1);
		});
		*/
		for(var n = 0, n2 = len = xy2.length - 1 ; n <= len; n ++, n2--){
			xy[n] = xy2[n2];
		}
		
		xy = xy1.concat(xy);
		
		return xy;
	}
	
	//画椭圆曲线
	function draw_oval(points){
		var len = points.length;
		var divs = '';
		for(var n = 0; n < len; n ++){
		divs += '<div class="points" style="left:'+ points[n][0] +'px;top:'+ points[n][1] +'px;"></div>';
		}
		return divs;
	}
	//沿着曲线跑动
	function go_oval(idd,points, n, t, addX, addY){
		var len = points.length;
		n = n ? n : 0;
		t = t ? t : 10;
		addX = addX ? addX : 0;
		addY = addY ? addY : 0;
		var $obj = $(idd).style;
		$obj.left = points[n][0] + addX + 'px';
		$obj.top = points[n][1] + addY + 'px';
		n ++;
		n = n == len ? 0 : n;
		setTimeout(function(){
		go_oval(idd, points, n, t, addX, addY);
		},t);
		
		
	}
	
	window.onload = function(){
		var points1 = make_points(50,100,1,200,200);
		var points2 = make_points(200,100,1);
		//画椭圆曲线
		$('#tuoyuan1').innerHTML =  draw_oval( points1 );
		$('#tuoyuan2').innerHTML =  draw_oval( points2 );
		//alert( make_points(200,100,3) )
		//小点在曲线上跑动
		go_oval('#go-oval1',points1,0,10 ,-5,-5);
		go_oval('#go-oval2',points2,0,10 ,-5,-5);
	};
})();
</script>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JavaScript画椭圆曲线

分类

网站常用

描述

运用JavaScript技术画椭圆曲线，动画形式生成椭圆曲线，写的很不错的JS特效，配合CSS Div综合实现的效果，希望大家喜欢。