jquery雷达信号探测器特效代码

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

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

以下是 jquery雷达信号探测器特效代码的示例演示效果:

当前平台(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>Radar - An audio-visual HTML 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">
		
			<header>
				<h1>Radar</h1>
				
				<!-- Extra content that can be expanded -->
				<div class="extra">
					
					<!-- Experiment description -->
					<section id="about">
						<h3>About</h3>
						<p>
							An experiment with real-time audio synthesis.<br> 
							Works well in Chrome &amp; Safari but runs slowly in Firefox. <br>
						</p>
						<p class="credits">
							Created by Hakim El Hattab | @hakimel
						</p>
					</section>

					<!-- Contributors & libs -->
					<section>
						<h3>Tech</h3>
						<p>
							Radar uses Audiolet to generate sound and <br>
							the visuals are rendered on HTML5 &lt;canvas&gt;. <br> <br>
							Source code available at github.com/hakimel/Radar.
						</p>
					</section>
					
					<!-- Social things -->
					<section id="share">
						<h3>Share</h3>

					</section>
					
				</div>
			</header>

			<div id="wrapper" class="empty">
				<canvas></canvas>
				<div class="sidebar">
					<button class="save">Save</button>
					<button class="reset">Reset</button>
					<ul class="sequencer-input">
						<li data-key="a" data-scale="min">A minor</li>
						<li data-key="a" data-scale="maj">A major</li>
						<li data-key="d" data-scale="min">D minor</li>
						<li data-key="d" data-scale="maj">D major</li>
						<li data-key="e" data-scale="min">E minor</li>
						<li data-key="e" data-scale="maj">E major</li>
					</ul>
					<ul class="sequencer">
						<li class="add-key">Add Key</li>
					</ul>
				</div>
				<span class="instructions">Click on a pin to generate sound</span>
			</div>

		</div>
		
		<script src="js/audiolet.dependencies.js"></script>
		<script src="js/audiolet.min.js"></script>

		<script src="js/header.js"></script>
		<script src="js/util.js"></script>
		<script src="js/radar.js"></script>
	</body>
</html>

JS代码(header.js):

/** * Controls the showing and hiding of the expandable * header. * * @author Hakim El Hattab / http://hakim.se */
window.onload = function(){
	var header = document.getElementsByTagName('header')[0];
	var headerToggleTimeOut = -1;
	var headerMouseDown = false;
	document.addEventListener( 'mousedown',function(){
	headerMouseDown = true;
}
,false );
	document.addEventListener( 'mouseup',function(){
	headerMouseDown = false;
}
,false );
	header.addEventListener('mouseover',function(){
	if (!headerMouseDown){
	// Make sure no previous call to toggle the header are// queued upclearTimeout( headerToggleTimeOut );
	// Avoid accidentally opening the header by setting// a short time outheaderToggleTimeOut = setTimeout( function(){
	header.setAttribute( 'class','open' )}
,100 );
}
}
,false);
	header.addEventListener('mouseout',function(){
	// Make sure no previous call to toggle the header are// queued upclearTimeout( headerToggleTimeOut );
	// Avoid accidentally closing the header by setting// a short time outheaderToggleTimeOut = setTimeout( function(){
	header.setAttribute( 'class','' )}
,100 );
}
,false);
}
;

CSS代码(main.css):

/********************************************* * GLOBAL *********************************************/
body,html{overflow:hidden;font-family:Helvetica,Arial,sans-serif;color:#fff;font-size:11px;background:#111;height:100%;}
.main-container{background:#111;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/********************************************* * HEADER *********************************************/
header{position:relative;width:100%;height:36px;margin:0;padding:0 8px 8px 8px;overflow:hidden;z-index:5;background:#1e2121;color:#eee;-webkit-transition:height .22s ease-out;-moz-transition:height .22s ease-out;-o-transition:height .22s ease-out;transition:height .22s ease-out;}
header.open{height:165px;}
header h1{font-family:Molengo,Helvetica,Arial,sans-serif;float:left;margin-top:1px;}
header .header-instruction{float:left;margin:12px 0 0 15px;font-size:10px;font-style:italic;color:#999;-webkit-transition:opacity .18s linear;-moz-transition:opacity .18s linear;-o-transition:opacity .18s linear;transition:opacity .18s linear;}
header.open .header-instruction{opacity:0;}
header div.extra{margin:45px 0 0 20px;clear:both;-webkit-transition:opacity .18s linear;-moz-transition:opacity .18s linear;-o-transition:opacity .18s linear;transition:opacity .18s linear;}
header div.extra h3{margin-bottom:10px;}
header a{color:#19d75a;text-decoration:underline;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-in;}
header a:hover{color:#67f38f;}
header section{height:120px;padding:0 25px;float:left;border-left:1px #333 solid;}
header p{margin-bottom:5px;font-size:12px;letter-spacing:0.05em;}
#about{padding-left:0;border:none;}
#about p.credits{margin:15px 0 2px 0;font-style:italic;color:#666;font-size:11px;line-height:1.4em;}
#share iframe,#share div{display:inline-block;}
#retweet-button{margin-right:6px;}
.no-canvas{color:#999999;font-size:24px;text-align:center;margin-top:150px;}
/********************************************* * EXPERIMENT STYLES *********************************************/
#wrapper{position:absolute;font-size:12px;color:#f4f4f4;cursor:default;}
#wrapper canvas{float:left;background:#000;background:url('../images/background.png') no-repeat;border:1px solid #222;border-radius:2px;box-shadow:0px 0px 20px rgba(0,0,0,0.5);}
#wrapper .instructions{display:block;position:absolute;left:0px;top:-22px;opacity:0;-webkit-transition:all .12s ease;-moz-transition:all .12s ease;-ms-transition:all .12s ease;-o-transition:all .12s ease;transition:all .12s ease;}
#wrapper.empty .instructions{opacity:1;}
#wrapper .sidebar{position:absolute;right:0;top:0;width:100px;color:#fff;opacity:1;font-size:12px;-webkit-transition:all .12s ease;-moz-transition:all .12s ease;-ms-transition:all .12s ease;-o-transition:all .12s ease;transition:all .12s ease;}
#wrapper.empty .sidebar{opacity:0;visibility:hidden;}
#wrapper .sidebar button{display:inline-block;width:48%;padding:6px;margin-bottom:14px;color:#bbb;background:rgba( 255,255,255,0.05 );opacity:1;border:none;border-radius:2px;cursor:pointer;font-size:12px;text-align:center;-webkit-transition:all .12s ease;-moz-transition:all .12s ease;-ms-transition:all .12s ease;-o-transition:all .12s ease;transition:all .12s ease;}
#wrapper .sidebar button:hover{opacity:1;color:#fff;background:rgba( 255,255,255,0.2 );}
/* SEQUENCER */
#wrapper .sidebar .sequencer{padding-top:14px;border-top:1px dotted rgba( 255,255,255,0.08 );}
#wrapper .sidebar .sequencer li{display:block;position:relative;padding:10px 6px;margin-bottom:4px;width:100%;cursor:pointer;background:#222;box-shadow:0px 0px 20px rgba(0,0,0,0.5);border-radius:2px;-webkit-transition:all .12s ease;-moz-transition:all .12s ease;-ms-transition:all .12s ease;-o-transition:all .12s ease;transition:all .12s ease;}
#wrapper .sidebar .sequencer li:hover{background:#333;}
#wrapper .sidebar .sequencer li .index{opacity:0.5;}
#wrapper .sidebar .sequencer li .delete{position:absolute;right:7px;top:3px;font-family:Helvetica;font-size:20px;opacity:0.1;}
#wrapper .sidebar .sequencer li:hover .delete{opacity:0.6;}
#wrapper .sidebar .sequencer li .delete:hover{opacity:1;}
#wrapper .sidebar .sequencer li .background{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;-webkit-transition:opacity 1.5s linear;-moz-transition:opacity 1.5s linear;-ms-transition:opacity 1.5s linear;-o-transition:opacity 1.5s linear;transition:opacity 1.5s linear;}
#wrapper .sidebar .sequencer li .background.instant{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
#wrapper .sidebar .sequencer li.add-key{background:#111;color:#fff;border:1px solid rgba( 255,255,255,0.05 );}
#wrapper .sidebar .sequencer li.add-key:hover{background:#222;}
#wrapper .sidebar .sequencer-input{visibility:hidden;position:absolute;width:100px;left:0;border-radius:2px;background:#222;}
#wrapper .sidebar .sequencer-input:before{content:'\2023';position:absolute;margin:76px 0 0 100%;left:-4px;color:#222;font-size:50px;}
#wrapper .sidebar .sequencer-input li{padding:10px 6px;background:#222;cursor:pointer;-webkit-transition:all .12s ease;-moz-transition:all .12s ease;-ms-transition:all .12s ease;-o-transition:all .12s ease;transition:all .12s ease;}
#wrapper .sidebar .sequencer-input li:hover{background:#333;}
#wrapper .sidebar .sequencer-input li+li{border-top:1px solid #333;}

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