jquery卫星信号发射器特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery卫星信号发射器特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="utf-8">		
<meta name="description" content="" />
<meta name="author" content="Hakim El Hattab" />		
<meta http-equiv="X-UA-Compatible" content="chrome=1">		
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width">
<title>Linjer - HTML canvas experiment</title>		
<link href="css/reset.css" rel="stylesheet" media="screen" />
<link href="css/main.css" rel="stylesheet" media="screen" />
<!--<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>-->
</head>
<body>
		<div class="main-container">
			<div id="wrapper" class="empty">
				<span class="instructions">
					<em>Click and drag</em> to add nodes.&nbsp; <em>Space</em> to reset.&nbsp; Reduce the browser window size if it's slow.&nbsp; <em>Style</em>: 

					<select class="styles">
						<option value="diagonal">Diagonal</option>
						<option value="circle">Circle</option>
						<option value="grid">Grid</option>
						<option value="cross">Cross</option>
						<option value="none">None</option>
					</select>
				</span>

			</div>
		</div>
		<script src="js/sketch.min.js"></script>
		<script src="js/util.js"></script>
		<script src="js/linjer.js"></script>
	</body>
</html>

JS代码(util.js):

/** * */
var Capabilities ={
	isOnline:function(){
	return navigator.onLine;
}
,isTouchDevice:function(){
	return navigator.userAgent.match( /(iphone|ipad|ipod|android)/gi );
}
,suportsLocalStorage:function(){
	return ('localStorage' in window) && window['localStorage'] !== null;
}
}
;
	/** * Defines a 2D position. */
function Point( x,y ){
	this.x = x || 0;
	this.y = y || 0;
}
Point.prototype.distanceTo = function( x,y ){
	var dx = x-this.x;
	var dy = y-this.y;
	return Math.sqrt(dx*dx + dy*dy);
}
;
	Point.prototype.clonePosition = function(){
	return{
	x:this.x,y:this.y}
;
}
;
	Point.prototype.interpolate = function( x,y,amp ){
	this.x += ( x - this.x ) * amp;
	this.y += ( y - this.y ) * amp;
}
;
	/** * Defines of a rectangular region. */
function Region(){
	this.left = 999999;
	this.top = 999999;
	this.right = 0;
	this.bottom = 0;
}
Region.prototype.reset = function(){
	this.left = 999999;
	this.top = 999999;
	this.right = 0;
	this.bottom = 0;
}
;
	Region.prototype.inflate = function( x,y ){
	this.left = Math.min(this.left,x);
	this.top = Math.min(this.top,y);
	this.right = Math.max(this.right,x);
	this.bottom = Math.max(this.bottom,y);
}
;
	Region.prototype.expand = function( x,y ){
	this.left -= x;
	this.top -= y;
	this.right += x;
	this.bottom += y;
}
;
	Region.prototype.contains = function( x,y ){
	return x > this.left && x < this.right && y > this.top && y < this.bottom;
}
;
	Region.prototype.size = function(){
	return ( ( this.right - this.left ) + ( this.bottom - this.top ) ) / 2;
}
;
	Region.prototype.center = function(){
	return new Point( this.left + (this.right - this.left) / 2,this.top + (this.bottom - this.top) / 2 );
}
;
	Region.prototype.toRectangle = function(){
	return{
	x:this.left,y:this.top,width:this.right - this.left,height:this.bottom - this.top}
;
}
;
	// shim layer with setTimeout fallback from http://paulirish.com/2011/requestanimationframe-for-smart-animating/window.requestAnimFrame = (function(){
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */
 callback,/* DOMElement */
 element){
	window.setTimeout(callback,1000 / 60);
}
;
}
)();

CSS代码(reset.css):

html{color:#000;background:#222222;}
a{cursor:pointer;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
/* h1,h2,h3,h4,h5,h6{font-size:100%;}
*/
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
legend{color:#000;}
a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style:none;border:0px;}
/*input[type="Submit"]{cursor:pointer;}
*/
strong{font-weight:bold;}
*{margin:0;padding:0;}

附件:下载该文件资源,减少时间成本(增值服务)