jquery带键盘敲击声五彩炫酷模拟键盘

使用方法

/*
此为键盘插件，使用很简单
		$('.keyboard').keyboard(opts);
		即可把一个盒子变成键盘
		如上 opts为参数，json格式，可不填，具体参数值如下
		

			width:p($obj.css('width')),			//键盘宽度
			radius:4,							//键盘四角的圆角度数
			padding:10,							//键盘四周空白区域宽度
			segment:4,							//键盘左中右之间分割线宽度

			FbuttonHeight:2,					//第一排F区域按键与第二行之间的距离
			
			keyWidth:0,							//按钮宽度
			keyHeight:0,						//按钮高度
			keyRadius:4,						//每个按钮四角的圆角度数
			keyFontSize:12,						//按钮上字体大小
			keyPassColor:'#fff',				//按钮按下时的字体颜色
			keyMargin:1,						//每个按钮四周留空的距离
			keyBorderWidth:1,					//每个按钮的边线宽度
			keyBorderColor:'#fff',				//每个按钮的边线颜色
			keyColorShadow:5,						//每个按钮的阴影扩散度
			
			keyDoubleFontSize:12,				//两行字的按钮上字体大小
			keyDoubleSegment:4,					//两行字的按钮上 上下两行间距
						
			lightRad:3,							//指示灯半径
			lightBorderColor:'#cdcd00',			//指示灯边线颜色
			lightBorderWidth:1,					//指示灯边线宽度
			lightColor:'#ccc',					//指示灯颜色
			lightColorShow:'#ff0',				//指示灯灯光颜色
			
			keyColors:['rgb(0, 255, 100)','rgb(255, 225, 0)','rgb(255, 100, 0)','rgb(255, 0, 75)','rgb(150, 0, 255)','rgb(0, 150, 255)'],//按钮颜色
			keyColorsRun:true,					//是否开启按钮颜色移动变化
			keyColorsRunTimes:1000,				//按钮颜色移动变化频率(毫秒)
			boardColors:['rgb(0, 255, 100)','rgb(255, 225, 0)','rgb(255, 100, 0)','rgb(255, 0, 75)','rgb(150, 0, 255)','rgb(0, 150, 255)'],//键盘内阴影颜色
			boardColorsShow:true,				//是否显示键盘背景内阴影
			boardColorsRun:true,				//是否开启键盘背景内阴影播放，不开启默认显示第一个颜色
			boardColorsRunType:'random',		//键盘内阴影播放方式'random' 随机播放 'order' 按顺序播放
			boardColorsInsetSize:200,			//键盘内阴影大小
			boardColorsRunTimes:1500,			//键盘内阴影播放频率(毫秒)
			keyAfterToRunTime:8000,				//按键结束后多少秒自动开启默认播放动作
			audio:'',							//按键声音路径
			keyREffect:true,					//是否开启按键四射特效
			keyREffectTimes:3					//按键特效速度，越小越快


 * */

(function($) {
	var p = function(a) {
			return parseInt(a)
		};
	$.fn.keyboard = function(a) {
		var b = this;
		var a = $.extend({
			width: p(b.css('width')),
			radius: 4,
			padding: 10,
			segment: 4,
			FbuttonHeight: 2,
			keyWidth: 0,
			keyHeight: 0,
			keyRadius: 4,
			keyFontSize: 12,
			keyPassColor: '#fff',
			keyMargin: 1,
			keyBorderWidth: 1,
			keyBorderColor: '#fff',
			keyColorShadow: 5,
			keyDoubleFontSize: 12,
			keyDoubleSegment: 4,
			lightRad: 3,
			lightBorderColor: '#cdcd00',
			lightBorderWidth: 1,
			lightColor: '#ccc',
			lightColorShow: '#ff0',
			keyColors: ['rgb(0, 255, 100)', 'rgb(255, 225, 0)', 'rgb(255, 100, 0)', 'rgb(255, 0, 75)', 'rgb(150, 0, 255)', 'rgb(0, 150, 255)'],
			keyColorsRun: true,
			keyColorsRunTimes: 1000,
			boardColors: ['rgb(0, 255, 100)', 'rgb(255, 225, 0)', 'rgb(255, 100, 0)', 'rgb(255, 0, 75)', 'rgb(150, 0, 255)', 'rgb(0, 150, 255)'],
			boardColorsShow: true,
			boardColorsRun: true,
			boardColorsRunType: 'random',
			boardColorsInsetSize: 200,
			boardColorsRunTimes: 1500,
			keyAfterToRunTime: 8000,
			audio: '',
			keyREffect: true,
			keyREffectTimes: 3
		}, a || {});
		a.keyWidth = a.keyWidth || p((p(a.width) - p(a.padding) * 2 - p(a.segment) * 2) / 22);
		a.keyHeight = a.keyHeight || a.keyWidth;
		addDom(b);
		initStyle(b, a);
		addEL(b, a);
		return this
	};

	function addDom(a) {
		var b = '<div class="keyboard_container">					<div class="keyboard_s keyboard_l">						<ul class="keyboard_row keyboard_row1">							<li data_index="27">Esc</li>							<li data_index="0" class="keyboard_gw"></li>							<li data_index="112">F1</li>							<li data_index="113">F2</li>							<li data_index="114">F3</li>							<li data_index="115">F4</li>							<li data_index="0" class="keyboard_gw keyboard_gw1_2"></li>							<li data_index="116">F5</li>							<li data_index="117">F6</li>							<li data_index="118">F7</li>							<li data_index="119">F8</li>							<li data_index="0" class="keyboard_gw keyboard_gw1_2"></li>							<li data_index="120">F9</li>							<li data_index="121">F10</li>							<li data_index="122">F11</li>							<li data_index="123">F12</li>						</ul>						<ul class="keyboard_row">							<li data_index="192" class="keyboard_double">~</br>`</li>							<li data_index="49" class="keyboard_double">!</br>1</li>							<li data_index="50" class="keyboard_double">@</br>2</li>							<li data_index="51" class="keyboard_double">#</br>3</li>							<li data_index="52" class="keyboard_double">$</br>4</li>							<li data_index="53" class="keyboard_double">%</br>5</li>							<li data_index="54" class="keyboard_double">^</br>6</li>							<li data_index="55" class="keyboard_double">&</br>7</li>							<li data_index="56" class="keyboard_double">*</br>8</li>							<li data_index="57" class="keyboard_double">(</br>9</li>							<li data_index="48" class="keyboard_double">)</br>0</li>							<li data_index="189" class="keyboard_double">—</br>-</li>							<li data_index="187" class="keyboard_double">+</br>=</li>							<li data_index="8" class="keyboard_w2">Backspace</li>						</ul>						<ul class="keyboard_row">							<li data_index="9" class="keyboard_w3_2">Tab</li>							<li data_index="81">Q</li>							<li data_index="87">W</li>							<li data_index="69">E</li>							<li data_index="82">R</li>							<li data_index="84">T</li>							<li data_index="89">Y</li>							<li data_index="85">U</li>							<li data_index="73">I</li>							<li data_index="79">O</li>							<li data_index="80">P</li>							<li data_index="219" class="keyboard_double">{</br>[</li>							<li data_index="221" class="keyboard_double">}</br>]</li>							<li data_index="220" class="keyboard_double keyboard_w3_2">|</br>\</li>						</ul>						<ul class="keyboard_row">							<li data_index="20" class="keyboard_w2">Caps Lock</li>							<li data_index="65">A</li>							<li data_index="83">S</li>							<li data_index="68">D</li>							<li data_index="70">F</li>							<li data_index="71">G</li>							<li data_index="72">H</li>							<li data_index="74">J</li>							<li data_index="75">K</li>							<li data_index="76">L</li>							<li data_index="186" class="keyboard_double">:</br>;</li>							<li data_index="222" class="keyboard_double">"</br>\'</li>							<li data_index="13" class="keyboard_w2">Enter</li>						</ul>						<ul class="keyboard_row">							<li data_index="16" class="keyboard_w5_2">Shift</li>							<li data_index="90">Z</li>							<li data_index="88">X</li>							<li data_index="67">C</li>							<li data_index="86">V</li>							<li data_index="66">B</li>							<li data_index="78">N</li>							<li data_index="77">M</li>							<li data_index="188" class="keyboard_double">&lt;</br>,</li>							<li data_index="190" class="keyboard_double">&gt;</br>.</li>							<li data_index="191" class="keyboard_double">?</br>/</li>							<li data_index="16" class="keyboard_w5_2">Shift</li>						</ul>						<ul class="keyboard_row">							<li data_index="17">Ctrl</li>							<li data_index="91">Win</li>							<li data_index="18">Alt</li>							<li data_index="32" class="keyboard_w8">space</li>							<li data_index="18">Alt</li>							<li data_index="92">Win</li>							<li data_index="93">嘿嘿</li>							<li data_index="17">Ctrl</li>						</ul>					</div>					<div class="keyboard_s keyboard_m">						<ul class="keyboard_row keyboard_row1">							<li data_index="44" class="keyboard_double">Primt Sc</br>SysRq</li>							<li data_index="145" class="keyboard_double">Scroll</br>Lock</li>							<li data_index="19" class="keyboard_double">Pause</br>Break</li>						</ul>						<ul class="keyboard_row">							<li data_index="45">Insert</li>							<li data_index="36">Home</li>							<li data_index="33" class="keyboard_double">Page</br>Up</li>						</ul>						<ul class="keyboard_row">							<li data_index="46">Delete</li>							<li data_index="35">End</li>							<li data_index="34" class="keyboard_double">Page</br>Down</li>						</ul>						<ul class="keyboard_row">							<li data_index="0" class="keyboard_gw"></li>						</ul>						<ul class="keyboard_row">							<li data_index="0" class="keyboard_gw"></li>							<li data_index="38">↑</li>							<li data_index="0" class="keyboard_gw"></li>						</ul>						<ul class="keyboard_row">							<li data_index="37">←</li>							<li data_index="40">↓</li>							<li data_index="39">→</li>						</ul>					</div>					<div class="keyboard_s keyboard_r">						<ul class="keyboard_row keyboard_row1">							<li class="keyboard_gw keyboard_lights">								<i><em class="keyboard_light"></em></i>								<i><em></em></i>								<i><em></em></i>							</li>						</ul>						<ul class="keyboard_row">							<li data_index="144" class="keyboard_double">Num<br/>Lock</li>							<li data_