├── media ├── 1.mp3 ├── 1.ogg ├── 2.mp3 ├── 2.ogg ├── 3.mp3 ├── 3.ogg ├── 4.mp3 ├── 4.ogg ├── 5.mp3 ├── 5.ogg ├── 6.mp3 ├── 6.ogg ├── 7.mp3 ├── 7.ogg ├── 8.mp3 ├── 8.ogg ├── 9.mp3 └── 9.ogg ├── images ├── about.jpg ├── copy.png ├── fail.gif ├── icon.png ├── logo.png ├── piano.jpg ├── favicon.ico ├── footer.jpg ├── gradient.png ├── success.gif └── share_link.png ├── js ├── clipboard.swf ├── jquery.json-2.4.min.js ├── pianoShare.js ├── pianoSwfobject.js ├── pianoStorage.js ├── piano.js └── jquery-1.9.0.js ├── README.md ├── css ├── reset.css └── piano.css └── index.html /media/1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/1.mp3 -------------------------------------------------------------------------------- /media/1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/1.ogg -------------------------------------------------------------------------------- /media/2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/2.mp3 -------------------------------------------------------------------------------- /media/2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/2.ogg -------------------------------------------------------------------------------- /media/3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/3.mp3 -------------------------------------------------------------------------------- /media/3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/3.ogg -------------------------------------------------------------------------------- /media/4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/4.mp3 -------------------------------------------------------------------------------- /media/4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/4.ogg -------------------------------------------------------------------------------- /media/5.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/5.mp3 -------------------------------------------------------------------------------- /media/5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/5.ogg -------------------------------------------------------------------------------- /media/6.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/6.mp3 -------------------------------------------------------------------------------- /media/6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/6.ogg -------------------------------------------------------------------------------- /media/7.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/7.mp3 -------------------------------------------------------------------------------- /media/7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/7.ogg -------------------------------------------------------------------------------- /media/8.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/8.mp3 -------------------------------------------------------------------------------- /media/8.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/8.ogg -------------------------------------------------------------------------------- /media/9.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/9.mp3 -------------------------------------------------------------------------------- /media/9.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/media/9.ogg -------------------------------------------------------------------------------- /images/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/images/about.jpg -------------------------------------------------------------------------------- /images/copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/images/copy.png -------------------------------------------------------------------------------- /images/fail.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/images/fail.gif -------------------------------------------------------------------------------- /images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/images/icon.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/piano.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/images/piano.jpg -------------------------------------------------------------------------------- /js/clipboard.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/js/clipboard.swf -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/images/favicon.ico -------------------------------------------------------------------------------- /images/footer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/images/footer.jpg -------------------------------------------------------------------------------- /images/gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/images/gradient.png -------------------------------------------------------------------------------- /images/success.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/images/success.gif -------------------------------------------------------------------------------- /images/share_link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackzhang1204/piano-play/HEAD/images/share_link.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | piano-play 2 | ========== 3 | 4 | 基于html5的钢琴弹奏游戏 5 | 6 | - demo地址：http://www.xuanfengge.com/piano 7 | 8 | 9 | 功能 10 | 11 | - 看谱弹琴 12 | - 录制曲谱 13 | - 保存曲谱 14 | - 分享曲谱 15 | - 弹奏试听 -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS Document */ 3 | /*------- reset -------*/ 4 | /* 5 | Theme Name: xuanfeng 6 | Date:2013/10/01; 7 | Version:2.0; 8 | */ 9 | html, body, div, span, applet, object, iframe, 10 | h1, h2, h3, h4, h5, h6, p, pre, 11 | a, abbr, acronym, address, big, cite, code, 12 | del, dfn, em, img, ins, kbd, q, s, samp, 13 | small, strike, strong, sub, sup, tt, var, 14 | b, u, i, center, 15 | dl, dt, dd, ol, ul, li, 16 | fieldset, form, label, legend, 17 | table, caption, tbody, tfoot, thead, tr, th, td, 18 | article, aside, canvas, details, embed, 19 | figure, figcaption, footer, header, hgroup, 20 | menu, nav, output, ruby, section, summary, 21 | time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } 22 | 23 | /* HTML5标签初始化 24 | --------------------------------------------------*/ 25 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 26 | 27 | /* 标签初始化 28 | --------------------------------------------------*/ 29 | body { line-height: 1; color:#333;font:14px/1.5 "微软雅黑",Arial, Helvetica, Verdana, sans-serif} 30 | ol, ul { list-style: none; } 31 | blockquote, q { 32 | quotes: none; 33 | border-left: solid 4px #39c; 34 | margin-left: 10px; 35 | padding-left: 10px; 36 | background: whitesmoke; 37 | margin: 10px auto; 38 | padding: 6px 10px; 39 | color: #666; 40 | font-size: 20px; 41 | } 42 | i{ 43 | font-style: normal; 44 | font-weight: normal; 45 | } 46 | blockquote:before, blockquote:after, 47 | q:before, q:after { content: ''; content: none; } 48 | table { border-collapse: collapse; border-spacing: 0; } 49 | a img{ border:0; } 50 | h1{ font-size:24px; } 51 | h2{ font-size:20px; } 52 | h3{ font-size:18px; } 53 | h4{ font-size:14px; } 54 | h5, h6{ font-size:12px; } 55 | a { text-decoration:none; } 56 | a:hover { text-decoration:underline; } 57 | div{display:block;} 58 | 59 | /* 解决Google浏览器字体不小于12px的问题 60 | --------------------------------------------------*/ 61 | html{ -webkit-text-size-adjust:none;} 62 | a:focus { 63 | outline:none; 64 | } 65 | 66 | /*让position:fixed在IE6下可用! */ 67 | * html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;} 68 | -------------------------------------------------------------------------------- /js/jquery.json-2.4.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery JSON plugin 2.4.0 | code.google.com/p/jquery-json */ 2 | (function($){'use strict';var escape=/["\\\x00-\x1f\x7f-\x9f]/g,meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'},hasOwn=Object.prototype.hasOwnProperty;$.toJSON=typeof JSON==='object'&&JSON.stringify?JSON.stringify:function(o){if(o===null){return'null';} 3 | var pairs,k,name,val,type=$.type(o);if(type==='undefined'){return undefined;} 4 | if(type==='number'||type==='boolean'){return String(o);} 5 | if(type==='string'){return $.quoteString(o);} 6 | if(typeof o.toJSON==='function'){return $.toJSON(o.toJSON());} 7 | if(type==='date'){var month=o.getUTCMonth()+1,day=o.getUTCDate(),year=o.getUTCFullYear(),hours=o.getUTCHours(),minutes=o.getUTCMinutes(),seconds=o.getUTCSeconds(),milli=o.getUTCMilliseconds();if(month<10){month='0'+month;} 8 | if(day<10){day='0'+day;} 9 | if(hours<10){hours='0'+hours;} 10 | if(minutes<10){minutes='0'+minutes;} 11 | if(seconds<10){seconds='0'+seconds;} 12 | if(milli<100){milli='0'+milli;} 13 | if(milli<10){milli='0'+milli;} 14 | return'"'+year+'-'+month+'-'+day+'T'+ 15 | hours+':'+minutes+':'+seconds+'.'+milli+'Z"';} 16 | pairs=[];if($.isArray(o)){for(k=0;k 2 | is released under the MIT License 3 | */ 4 | var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="ShockwaveFlash.ShockwaveFlash",q="application/x-shockwave-flash",R="SWFObjectExprInst",x="onreadystatechange",O=window,j=document,t=navigator,T=false,U=[h],o=[],N=[],I=[],l,Q,E,B,J=false,a=false,n,G,m=true,M=function(){var aa=typeof j.getElementById!=D&&typeof j.getElementsByTagName!=D&&typeof j.createElement!=D,ah=t.userAgent.toLowerCase(),Y=t.platform.toLowerCase(),ae=Y?/win/.test(Y):/win/.test(ah),ac=Y?/mac/.test(Y):/mac/.test(ah),af=/webkit/.test(ah)?parseFloat(ah.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,X=!+"\v1",ag=[0,0,0],ab=null;if(typeof t.plugins!=D&&typeof t.plugins[S]==r){ab=t.plugins[S].description;if(ab&&!(typeof t.mimeTypes!=D&&t.mimeTypes[q]&&!t.mimeTypes[q].enabledPlugin)){T=true;X=false;ab=ab.replace(/^.*\s+(\S+\s+\S+$)/,"$1");ag[0]=parseInt(ab.replace(/^(.*)\..*$/,"$1"),10);ag[1]=parseInt(ab.replace(/^.*\.(.*)\s.*$/,"$1"),10);ag[2]=/[a-zA-Z]/.test(ab)?parseInt(ab.replace(/^.*[a-zA-Z]+(.*)$/,"$1"),10):0}}else{if(typeof O.ActiveXObject!=D){try{var ad=new ActiveXObject(W);if(ad){ab=ad.GetVariable("$version");if(ab){X=true;ab=ab.split(" ")[1].split(",");ag=[parseInt(ab[0],10),parseInt(ab[1],10),parseInt(ab[2],10)]}}}catch(Z){}}}return{w3:aa,pv:ag,wk:af,ie:X,win:ae,mac:ac}}(),k=function(){if(!M.w3){return}if((typeof j.readyState!=D&&j.readyState=="complete")||(typeof j.readyState==D&&(j.getElementsByTagName("body")[0]||j.body))){f()}if(!J){if(typeof j.addEventListener!=D){j.addEventListener("DOMContentLoaded",f,false)}if(M.ie&&M.win){j.attachEvent(x,function(){if(j.readyState=="complete"){j.detachEvent(x,arguments.callee);f()}});if(O==top){(function(){if(J){return}try{j.documentElement.doScroll("left")}catch(X){setTimeout(arguments.callee,0);return}f()})()}}if(M.wk){(function(){if(J){return}if(!/loaded|complete/.test(j.readyState)){setTimeout(arguments.callee,0);return}f()})()}s(f)}}();function f(){if(J){return}try{var Z=j.getElementsByTagName("body")[0].appendChild(C("span"));Z.parentNode.removeChild(Z)}catch(aa){return}J=true;var X=U.length;for(var Y=0;Y0){for(var af=0;af0){var ae=c(Y);if(ae){if(F(o[af].swfVersion)&&!(M.wk&&M.wk<312)){w(Y,true);if(ab){aa.success=true;aa.ref=z(Y);ab(aa)}}else{if(o[af].expressInstall&&A()){var ai={};ai.data=o[af].expressInstall;ai.width=ae.getAttribute("width")||"0";ai.height=ae.getAttribute("height")||"0";if(ae.getAttribute("class")){ai.styleclass=ae.getAttribute("class")}if(ae.getAttribute("align")){ai.align=ae.getAttribute("align")}var ah={};var X=ae.getElementsByTagName("param");var ac=X.length;for(var ad=0;ad'}}aa.outerHTML='"+af+"";N[N.length]=ai.id;X=c(ai.id)}else{var Z=C(r);Z.setAttribute("type",q);for(var ac in ai){if(ai[ac]!=Object.prototype[ac]){if(ac.toLowerCase()=="styleclass"){Z.setAttribute("class",ai[ac])}else{if(ac.toLowerCase()!="classid"){Z.setAttribute(ac,ai[ac])}}}}for(var ab in ag){if(ag[ab]!=Object.prototype[ab]&&ab.toLowerCase()!="movie"){e(Z,ab,ag[ab])}}aa.parentNode.replaceChild(Z,aa);X=Z}}return X}function e(Z,X,Y){var aa=C("param");aa.setAttribute("name",X);aa.setAttribute("value",Y);Z.appendChild(aa)}function y(Y){var X=c(Y);if(X&&X.nodeName=="OBJECT"){if(M.ie&&M.win){X.style.display="none";(function(){if(X.readyState==4){b(Y)}else{setTimeout(arguments.callee,10)}})()}else{X.parentNode.removeChild(X)}}}function b(Z){var Y=c(Z);if(Y){for(var X in Y){if(typeof Y[X]=="function"){Y[X]=null}}Y.parentNode.removeChild(Y)}}function c(Z){var X=null;try{X=j.getElementById(Z)}catch(Y){}return X}function C(X){return j.createElement(X)}function i(Z,X,Y){Z.attachEvent(X,Y);I[I.length]=[Z,X,Y]}function F(Z){var Y=M.pv,X=Z.split(".");X[0]=parseInt(X[0],10);X[1]=parseInt(X[1],10)||0;X[2]=parseInt(X[2],10)||0;return(Y[0]>X[0]||(Y[0]==X[0]&&Y[1]>X[1])||(Y[0]==X[0]&&Y[1]==X[1]&&Y[2]>=X[2]))?true:false}function v(ac,Y,ad,ab){if(M.ie&&M.mac){return}var aa=j.getElementsByTagName("head")[0];if(!aa){return}var X=(ad&&typeof ad=="string")?ad:"screen";if(ab){n=null;G=null}if(!n||G!=X){var Z=C("style");Z.setAttribute("type","text/css");Z.setAttribute("media",X);n=aa.appendChild(Z);if(M.ie&&M.win&&typeof j.styleSheets!=D&&j.styleSheets.length>0){n=j.styleSheets[j.styleSheets.length-1]}G=X}if(M.ie&&M.win){if(n&&typeof n.addRule==r){n.addRule(ac,Y)}}else{if(n&&typeof j.createTextNode!=D){n.appendChild(j.createTextNode(ac+" {"+Y+"}"))}}}function w(Z,X){if(!m){return}var Y=X?"visible":"hidden";if(J&&c(Z)){c(Z).style.visibility=Y}else{v("#"+Z,"visibility:"+Y)}}function L(Y){var Z=/[\\\"<>\.;]/;var X=Z.exec(Y)!=null;return X&&typeof encodeURIComponent!=D?encodeURIComponent(Y):Y}var d=function(){if(M.ie&&M.win){window.attachEvent("onunload",function(){var ac=I.length;for(var ab=0;ab'+list[i].title+''; 366 | } 367 | tmp += '
  • •我要提交曲谱>>
    • '; 368 | tmp += ""; 369 | $("#list-info")[0].innerHTML = tmp; 370 | } 371 | 372 | // 根据key生成歌曲的曲谱 373 | function renderSong(key){ 374 | var opern = $("#song-opern"), //曲谱面板dom 375 | song = albumList[key], //根据歌名获取数据 376 | title = song.title, //获取歌名 377 | keys = song.book, //获取曲谱 378 | from = $("#song-opern").find(".opern-from"); //贡献者dom 379 | from.hide(); //隐藏贡献者信息 380 | opern.find(".title").html(title); //设置歌名 381 | 382 | if(keys.length){ //全部遍历 383 | var COUNT = 35, //一行最多35个音 384 | len = Math.ceil(keys.length/COUNT); //计算行数 385 | $("#opern-info")[0].innerHTML = ""; //重置曲谱面板 386 | for(var i=0;i'; 402 | }else{ 403 | // 低音 404 | tmp1 += '
    '+num+'
    '; 405 | } 406 | tmp2 += '
    '+map[num]+'
    '; 407 | } 408 | } 409 | $("#opern-info")[0].innerHTML += '
    乐谱
    '+tmp1+'
    '; 410 | $("#opern-info")[0].innerHTML += '
    键盘弹奏
    '+tmp2+'
    '; 411 | } 412 | } 413 | // 显示试听链接 414 | $(".save_listen").data("list", song.link); //试听链接 415 | $(".share_record").attr("href", song.link); //更新分享链接 416 | $(".save_extra").show(); //显示试听与删除 417 | $("#opern-info").data("key", key); //设置key，便于删除 418 | } 419 | 420 | 421 | 422 | 423 | 424 | // 社交分享 425 | // 分析：链接数据随时改变，需要即时触发 426 | var shareUrl = ""; 427 | function share(){ 428 | // 定义数据：新浪微博、腾讯微博、QQ空间、人人网 429 | var shareCourseTitle = $(".share_title").data("title"); 430 | var sinaTitle = '分享节奏 「' + shareCourseTitle + '」 -轩枫阁（分享自@轩枫Y_me）', 431 | renrenTitle = '分享节奏 「' + shareCourseTitle + '」-轩枫阁（分享自@农航亮(356948827)）', 432 | tqqTitle = '分享节奏 「' + shareCourseTitle + '」-轩枫阁（分享自@轩枫阁）'; 433 | tqzoneTitle = '分享节奏 「' + shareCourseTitle + '」-轩枫阁（分享自@♪紫轩枫、）'; 434 | var picShare = "http://www.xuanfengge.com/wp-content/themes/lee2.0/images/piano.jpg"; 435 | shareUrl = encodeURIComponent($(".share_record").attr("href")); 436 | $('body').pianoSnsShare({ 437 | tsina:{ 438 | url: shareUrl, 439 | title:sinaTitle, 440 | pic:picShare 441 | }, 442 | renren:{ 443 | srcUrl: shareUrl, 444 | title:renrenTitle, 445 | pic:picShare 446 | }, 447 | tqq:{ 448 | url: shareUrl, 449 | title:tqqTitle, 450 | pic:picShare 451 | }, 452 | tqzone:{ 453 | url: shareUrl, 454 | title:tqzoneTitle, 455 | pic:picShare 456 | } 457 | }); 458 | } 459 | 460 | // 点击歌曲获取曲谱 461 | $("#list-info").delegate(".save_song a","click",function(e){ 462 | e.preventDefault(); 463 | var key = $(this).data("key"), //获取歌名 464 | song = albumList[key]; //获取曲谱数据 465 | renderSong(key); //生成曲谱面板 466 | share(); 467 | $("#song-list").hide(); //隐藏歌曲列表 468 | $("#song-opern").show(); //显示曲谱面板 469 | $(".piano_function").show(); 470 | $(".record-area").show(); 471 | $(".record-success .record-panel").hide(); 472 | $(".record-share").show(); 473 | $(".record-success").show(); 474 | }); 475 | 476 | 477 | }); 478 | -------------------------------------------------------------------------------- /js/piano.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | 3 | 4 | var piano = { 5 | "keyDom": $("#nav #menu-nav li"), 6 | "url": "", //弹奏后生成的曲谱链接 7 | "audioOn": 0, //是否加载audio dom 8 | "timeRuner": null, //计时器setinterval 9 | "timeCount": 0, //节奏总时间 10 | "step": 0, //计时器时间累加 11 | "lazyTimer": [], //延时定时器 12 | "extraTimer": null //导航延时计时器 13 | } 14 | 15 | // 钢琴导航菜单，显示菜单 16 | $(".music_trangle").hover(function(){ 17 | clearTimeout(piano.extraTimer); 18 | $(".piano_extra").show(); 19 | $(this).addClass('trangle_hover'); 20 | },function(){ 21 | piano.extraTimer = setTimeout(function(){ 22 | $(".piano_extra").hide(); 23 | $(".music_trangle").removeClass('trangle_hover'); 24 | },800); 25 | }); 26 | 27 | 28 | // 延时隐藏菜单 29 | $(".piano_extra").hover(function(){ 30 | clearTimeout(piano.extraTimer); 31 | $(this).show(); 32 | $(".music_trangle").addClass('trangle_hover'); 33 | },function(){ 34 | $(this).hide(); 35 | $(".music_trangle").removeClass('trangle_hover'); 36 | }); 37 | 38 | // 菜单1. 看谱弹琴 39 | $(".book_play").click(function(){ 40 | renderList(list); 41 | $(".piano_album").show(); 42 | $(".album_choose").show(); 43 | $(".piano_function").hide(); 44 | $(".song-list").show(); 45 | $(".song-opern").hide(); 46 | $(".save_extra").hide(); 47 | }); 48 | 49 | // 菜单2. 录制曲子 50 | $(".song_record").click(function(){ 51 | $(".album_choose").hide(); 52 | $(".piano_function").show(); 53 | $(".piano_album").show(); 54 | $(".record-area").show(); 55 | $(".record-success").hide(); 56 | }); 57 | 58 | $(".piano_extra").click(function(){ 59 | $("#banner, .feature, #top, #logo").hide(); 60 | $("#nav").animate({width: "980px"}); 61 | $("#nav li").animate({width: "108.5px"}); 62 | }); 63 | 64 | $(".piano_album").on("click", ".album_close", function(){ 65 | $("#banner, .feature, #top, #logo").show(); 66 | $("#nav li").css({width: "90px"}); 67 | $("#nav").css({width: "810px"}); 68 | }); 69 | 70 | // dom中插入音乐文件 71 | function addPiano(){ 72 | // 添加色块 73 | $(".menu li a").after('
    '); 74 | // 获取格式 75 | var audio_msg=checkAudioCompat(), 76 | show_audio=setTimeout(function(){ 77 | var len=$(".menu li").length, 78 | audio_html = ""; 79 | for(var j=0;j'; 81 | } 82 | $(".piano_audio").append(audio_html); 83 | piano.audioOn=1; 84 | },1000); 85 | // 延时加载 86 | } 87 | 88 | 89 | // 打开页面时自动播放 90 | function initAutoMusic(initUrl){ 91 | var testReg = /\/\?music=(\d:\d-?)*/; 92 | var test = testReg.test(initUrl); 93 | if(test){ 94 | // 声音文件是否加载完毕 95 | var testTimer = setInterval(function(){ 96 | if(piano.audioOn = 1){ 97 | clearInterval(testTimer); 98 | // 等待下载文件 99 | setTimeout(function(){ 100 | // 获取参数 101 | var paramReg = /\/\?music=/, 102 | start = initUrl.search(paramReg) + 8, 103 | end = initUrl.length, 104 | params = initUrl.substring(start, end); 105 | 106 | // 封装数据 107 | var dataArr = params.split("-"), 108 | music = parseData(dataArr); 109 | listen(music); 110 | },1500) 111 | } 112 | },500); 113 | } 114 | } 115 | 116 | 117 | // 根据浏览器判断是否加载声音文件 118 | if( $.browser.msie && $.browser.version <9){ 119 | $(".menu li a").after('
    '); 120 | $(".menu").addClass("menupiano"); 121 | $(".music_extra_nav").hide(); 122 | var initUrl = location.href; 123 | var testReg = /\/\?music=(\d:\d-?)*/; 124 | var test = testReg.test(initUrl); 125 | if(test){ 126 | var position = $("#logo").offset(); 127 | alert("浏览器不支持音乐播放，请使用chrome谷歌内核浏览器"); 128 | } 129 | }else{ 130 | var clientWidth=document.documentElement.clientWidth || document.body.clientWidth; 131 | if(clientWidth>980){ 132 | // 加载声音dom 133 | addPiano(); 134 | // 有节奏链接时自动播放 135 | var initUrl = location.href; 136 | initAutoMusic(initUrl) 137 | } 138 | } 139 | 140 | 141 | // 检测支持audio的格式 142 | function checkAudioCompat() { 143 | var myAudio = document.createElement('audio'); 144 | var msg = ""; 145 | if (myAudio.canPlayType) { 146 | // CanPlayType returns maybe, probably, or an empty string. 147 | var playMsg = myAudio.canPlayType('audio/mpeg'); 148 | playMsg = myAudio.canPlayType('audio/ogg; codecs="vorbis"'); 149 | if ( "" != playMsg){ 150 | return msg="ogg"; 151 | } 152 | if ( "" != playMsg) { 153 | return msg="mp3"; 154 | } 155 | } 156 | } 157 | 158 | 159 | // 根据key播放按键声音 160 | function playKey(i){ 161 | // 获取audio格式 162 | var audio_msg=checkAudioCompat(); 163 | // 判断是否已加载 164 | if(piano.audioOn==1){ 165 | try{ 166 | // 方案一（弹一次加载一次） 167 | // var source = "media/"+(i+1)+".mp3"; 168 | // console.log(source) 169 | // $("body").find(".my_audio").eq(i).attr("src", source); 170 | // $("body").find(".my_audio").eq(i).attr("autoplay", "autoplay"); 171 | 172 | // 方案二（弹奏速度过快时存在误差） 173 | $("body").find(".my_audio").eq(i).get(0).currentTime=0; 174 | $("body").find(".my_audio").eq(i).get(0).play(); 175 | 176 | }catch(e){ 177 | console.log(e); 178 | } 179 | } 180 | } 181 | 182 | 183 | 184 | // 计时(记录按键之间的节奏，100ms为单位) 185 | function timeRun(){ 186 | piano.step = 0; 187 | clearInterval(piano.timeRuner); 188 | piano.timeRuner = setInterval(function(){ 189 | piano.step += 100; 190 | piano.timeCount = piano.step; 191 | },100); 192 | } 193 | 194 | // 开始录制 195 | function startRecord(key){ 196 | // 判断是否开始录制，是否已结束 197 | if(status.play){ 198 | // 切换成已开始弹奏状态，可点击完成弹奏 199 | status.end = true; 200 | // 录制时统计数据 201 | if(piano.url != ""){ 202 | // 时间换算 1s:100ms 203 | if(key !=0){ 204 | var urlTime = piano.timeCount/100; 205 | piano.url += "-" + key + ":" + urlTime; 206 | // 继续计时 207 | timeRun(); 208 | }else{ 209 | // 为0时表示输入空格，用于曲谱间隔，在此无效 210 | piano.url += "-" + key + ":0"; 211 | } 212 | }else{ 213 | piano.url += key + ":0"; 214 | // 开启计时 215 | timeRun(); 216 | } 217 | } 218 | } 219 | 220 | 221 | // hover时弹钢琴 222 | piano.keyDom.each(function(i){ 223 | $(this).hover(function(){ 224 | // 色块动画 225 | $(this).children("div").stop(true, false).animate({top:'0px'},200); 226 | // 声音文件（判断是否已加载） 227 | playKey(i); 228 | // 录制 229 | startRecord(i+1); 230 | },function(){ 231 | // 色块动画 232 | $(this).children("div").animate({top:'66px'},200); 233 | }); 234 | }); 235 | 236 | // 键盘按下录制钢琴 237 | $(document).keydown(function(event){ 238 | // 主键盘 239 | // 1-49 2-50 3-51 4-52 5-53 6-54 7-55 8-56 9-57 240 | // 小键盘 241 | // 1-97 2-98 3-99 4-100 5-101 6-102 7-103 8-104 9-105 242 | // 主键盘字母 243 | //a-65 s-83 d-68 f-70 g-71 h-72 j-74 k-75 l-76 244 | 245 | if( event.keyCode == 49 || event.keyCode == 97 || event.keyCode == 65 ){ 246 | // 手动弹奏，播放音乐 247 | playPiano(1); 248 | // 录制 249 | startRecord(1); 250 | }else if( event.keyCode == 50 || event.keyCode == 98 || event.keyCode == 83 ){ 251 | playPiano(2); 252 | startRecord(2); 253 | } 254 | else if( event.keyCode == 51 || event.keyCode == 99 || event.keyCode == 68 ){ 255 | playPiano(3); 256 | startRecord(3); 257 | } 258 | else if( event.keyCode == 52 || event.keyCode == 100 || event.keyCode == 70 ){ 259 | playPiano(4); 260 | startRecord(4); 261 | } 262 | else if( event.keyCode == 53 || event.keyCode == 101 || event.keyCode == 71 ){ 263 | playPiano(5); 264 | startRecord(5); 265 | } 266 | else if( event.keyCode == 54 || event.keyCode == 102 || event.keyCode == 72 ){ 267 | playPiano(6); 268 | startRecord(6); 269 | } 270 | else if( event.keyCode == 55 || event.keyCode == 103 || event.keyCode == 74 ){ 271 | playPiano(7); 272 | startRecord(7); 273 | } 274 | else if( event.keyCode == 56 || event.keyCode == 104 || event.keyCode == 75 ){ 275 | playPiano(8); 276 | startRecord(8); 277 | } 278 | else if( event.keyCode == 57 || event.keyCode == 105 || event.keyCode == 76 ){ 279 | playPiano(9); 280 | startRecord(9); 281 | }else if( event.keyCode == 32 ){ 282 | startRecord(0); 283 | } 284 | else if( event.keyCode == 13 ){ 285 | 286 | } 287 | // console.log(event.keyCode) 288 | }); 289 | 290 | 291 | // 弹奏钢琴 292 | function playPiano(i){ 293 | var key = i-1; 294 | // 色块动画 295 | piano.keyDom.eq(key).children("div").stop(true, false).animate({top:'0px'},200); 296 | piano.keyDom.eq(key).children("div").animate({top:'66px'},200); 297 | // 声音播放 298 | playKey(key); 299 | } 300 | 301 | 302 | 303 | 304 | 305 | 306 | /* 307 | * 第二部分 308 | * 功能：弹奏按钮功能，控制流程 309 | */ 310 | 311 | 312 | // 状态存储 313 | var status = { 314 | "play":false, //正在录制 315 | "copy":false, //复制 316 | "end":false, //结束 317 | "reset": false //重置 318 | } 319 | 320 | 321 | // 开始录制 322 | $(".piano_function").on("click", ".start_record", function(){ 323 | // 开启记录数据 324 | status.play = true; 325 | // 下一步 326 | $(".cancel_record").show(); 327 | $(".finish_record").show(); 328 | $(".record-state").text("正在录制，请使用鼠标或键盘弹奏"); 329 | $(this).hide(); 330 | }); 331 | 332 | // 取消录制 333 | $(".piano_function").on("click", ".cancel_record", function(){ 334 | // 取消记录并清空已弹奏数据 335 | status.play = false; 336 | piano.url = ""; 337 | // 切换成已结束弹奏状态 338 | status.end = false; 339 | // 下一步 340 | $(".finish_record").hide(); 341 | $(".start_record").show(); 342 | $(this).hide(); 343 | $(".record-state").text("点击开始录制，可以把你弹奏的曲子录制下来"); 344 | }); 345 | 346 | // 完成录制 347 | // 分析：更新链接，显示分享、试听、复制 348 | $(".piano_function").on("click", ".finish_record", function(){ 349 | // 判断是否已录制声音 350 | if(status.end){ 351 | // 取消记录数据并更新链接 352 | status.play = false; 353 | // 切换成已结束弹奏状态 354 | status.end = false; 355 | // 生成已弹奏链接 356 | var allUrl = "http://www.xuanfengge.com/?music=" + piano.url; 357 | $(".share_record").attr("href", allUrl); 358 | piano.url = ""; 359 | // 更新链接，用于点击复制（AS获取） 360 | var copyCon = $(".share_record").attr("href"); 361 | var flashvars = { 362 | content: encodeURIComponent(copyCon), 363 | uri: './images/copy.png' 364 | }; 365 | var params = { 366 | wmode: "transparent", 367 | allowScriptAccess: "always" 368 | }; 369 | swfobject.embedSWF("./js/clipboard.swf", "forLoadSwf", "120", "25", "9.0.0", null, flashvars, params); 370 | // 更新链接,触发分享函数（分享获取） 371 | shareUrl = encodeURIComponent($(".share_record").attr("href")); 372 | share(); 373 | 374 | // 显示试听、保存 375 | $(".record-success .record-info").hide(); 376 | $(".start_listen, .save_record").show(); 377 | $(".record-share").show(); 378 | $(".record-success .record-panel").show(); 379 | }else{ 380 | // 未有录入声音 381 | $(".record-success .record-info").show(); 382 | $(".start_listen, .save_record").hide(); 383 | $(".upload_record").hide(); 384 | $(".record-share").hide(); 385 | } 386 | 387 | // 下一步 388 | $(".record-success").show(); 389 | $(".record-state").text("点击开始录制，可以把你弹奏的曲子录制下来"); 390 | $(".start_record").show(); 391 | $(".finish_record, .cancel_record").hide(); 392 | $(".record-area").hide(); 393 | }); 394 | 395 | 396 | // 马上试听 397 | // 分析：获取链接数据、解析、触发 398 | $(".piano_function").on("click", ".start_listen", function(){ 399 | var shareLink = $(".share_record").attr("href"); 400 | var music = analysis(shareLink); //生成json数据 401 | listen(music); //启动自动播放 402 | }); 403 | 404 | 405 | // 重新录制 406 | // 分析：重置数据（url、time、share）,可忽略 407 | $(".piano_function").on("click", ".reset_record", function(){ 408 | // 下一步 409 | $(".record-area").show(); 410 | $(".record-success").hide(); 411 | }); 412 | 413 | 414 | // 复制链接 415 | // 分析：完成录制时更新链接 416 | $(".piano_function").on("click", ".share_record", function(){ 417 | // var shareLink = $(this).attr("href"); 418 | // 这里无效，已用flash解决 419 | }); 420 | 421 | 422 | // 提交曲谱 423 | // 分析：本地分享，链接跳转，判断是否已复制 424 | $(".piano_function").on("click", ".upload_record", function(){ 425 | var position = $(this).offset(); 426 | if($(".share_record").data("copy")){ 427 | savePopShow("已复制歌曲链接，正在跳转...", position); 428 | // setTimeout(function(){ 429 | // window.open("http://www.xuanfengge.com/piano"); 430 | // },300); 431 | }else{ 432 | savePopShow("请先复制歌曲链接", position, "error"); 433 | return false; 434 | } 435 | }); 436 | 437 | 438 | // 返回曲谱列表(相当于取消录制) 439 | $(".album_choose").on("click", ".select-another", function(){ 440 | // 取消记录数据 441 | status.play = false; 442 | // 切换成已结束弹奏状态 443 | status.end = false; 444 | // 下一步 445 | $(".finish_record").hide(); 446 | $(".start_record").show(); 447 | $(".cancel_record").hide(); 448 | $(".record-state").text("点击开始录制，可以把你弹奏的曲子录制下来"); 449 | $(".piano_function").hide(); 450 | $(".record-success").hide(); 451 | }); 452 | 453 | 454 | // 点击歌曲选择曲谱（显示面板） 455 | $(".album_choose").on("click", ".song a", function(){ 456 | $(".piano_function").show(); 457 | }); 458 | 459 | 460 | // 社交分享 461 | // 分析：链接数据随时改变，需要即时触发 462 | var shareUrl = ""; 463 | function share(){ 464 | // 定义数据：新浪微博、腾讯微博、QQ空间、人人网 465 | var shareCourseTitle = $(".share_title").data("title"); 466 | var sinaTitle = '分享节奏 「' + shareCourseTitle + '」 -轩枫阁（分享自@轩枫Y_me）', 467 | renrenTitle = '分享节奏 「' + shareCourseTitle + '」-轩枫阁（分享自@农航亮(356948827)）', 468 | tqqTitle = '分享节奏 「' + shareCourseTitle + '」-轩枫阁（分享自@轩枫阁）'; 469 | tqzoneTitle = '分享节奏 「' + shareCourseTitle + '」-轩枫阁（分享自@♪紫轩枫、）'; 470 | var picShare = "./images/piano.jpg"; 471 | shareUrl = encodeURIComponent($(".share_record").attr("href")); 472 | $('body').pianoSnsShare({ 473 | tsina:{ 474 | url: shareUrl, 475 | title:sinaTitle, 476 | pic:picShare 477 | }, 478 | renren:{ 479 | srcUrl: shareUrl, 480 | title:renrenTitle, 481 | pic:picShare 482 | }, 483 | tqq:{ 484 | url: shareUrl, 485 | title:tqqTitle, 486 | pic:picShare 487 | }, 488 | tqzone:{ 489 | url: shareUrl, 490 | title:tqzoneTitle, 491 | pic:picShare 492 | } 493 | }); 494 | } 495 | 496 | 497 | 498 | 499 | 500 | 501 | /* 502 | * 第三部分 503 | * 功能：自动弹钢琴 504 | */ 505 | 506 | 507 | 508 | // 试听数据模版 509 | var autoPlayData = { 510 | "data": [ 511 | {"key": 1, "time": 300}, 512 | {"key": 3, "time": 200}, 513 | {"key": 6, "time": 400}, 514 | {"key": 2, "time": 600} 515 | ] 516 | }; 517 | 518 | 519 | // 试听数据触发音乐 520 | // 分析：传入json数据 521 | function listen(playData){ 522 | var data = playData.data, 523 | len = data.length, 524 | startTime = 0; //延时定时器计时 525 | 526 | for( var i=0; i0; i--){ 554 | clearTimeout(piano.lazyTimer[i]); 555 | } 556 | piano.lazyTimer.length = 0; 557 | } 558 | 559 | // 分析链接,返回json 560 | function analysis(list){ 561 | // 链接检测 562 | var testReg = /\/\?music=(\d:\d-?)*/, 563 | test = testReg.test(list); 564 | if(test){ 565 | // 获取参数 566 | var paramReg = /\/\?music=/, 567 | start = list.search(paramReg) + 8, 568 | end = list.length, 569 | params = list.substring(start, end); 570 | console.log(params); 571 | // 封装数据 572 | var dataArr = params.split("-"); 573 | return parseData(dataArr); 574 | }else{ 575 | alert("钢琴链接格式出错，请粘贴完整！") 576 | } 577 | } 578 | 579 | // 数组转成json数据 580 | function parseData(arr){ 581 | var autoPlayData = {}; 582 | autoPlayData.data = []; 583 | var jsonObj = autoPlayData.data; 584 | var len = arr.length; 585 | // 遍历封装 586 | for(var i=0; i'+i+''; 678 | } 679 | tmp += '
  • •我要提交曲谱>>
    • '; 680 | tmp += ""; 681 | $("#list-info")[0].innerHTML = tmp; 682 | } 683 | 684 | 685 | // 生成歌曲的曲谱 686 | function renderSong(title){ 687 | var opern = $("#song-opern"), //曲谱面板dom 688 | song = list[title]; //根据歌名获取数据 689 | opern.find(".title").html(title); //设置歌名 690 | var arr = song.split("|"), //拆分数据（可能为3部分） 691 | keys = arr && arr[0]; //获取曲谱 692 | var from = $("#song-opern").find(".opern-from"); //贡献者dom 693 | from.hide(); //隐藏贡献者信息 694 | if(keys.length){ //全部遍历 695 | var COUNT = 35, //一行最多35个音 696 | len = Math.ceil(keys.length/COUNT); //计算行数 697 | $("#opern-info")[0].innerHTML = ""; //重置曲谱面板 698 | for(var i=0;i'; 714 | }else{ 715 | // 低音 716 | tmp1 += '
    '+num+'
    '; 717 | } 718 | tmp2 += '
    '+map[num]+'
    '; 719 | } 720 | } 721 | $("#opern-info")[0].innerHTML += '
    乐谱
    '+tmp1+'
    '; 722 | $("#opern-info")[0].innerHTML += '
    键盘弹奏
    '+tmp2+'
    '; 723 | } 724 | } 725 | // 是否有曲谱贡献者 726 | if(arr[1]){ 727 | var link = from.find("a"); 728 | link.html(arr[1]); //贡献者名字 729 | arr[2] && link.attr("href",arr[2]); //贡献者链接 730 | from.show(); //显示贡献者信息 731 | } 732 | } 733 | 734 | 735 | // 点击歌曲获取曲谱 736 | $("#list-info").delegate(".song a","click",function(e){ 737 | e.preventDefault(); 738 | var title = $(this).attr("data-title"), //获取歌名 739 | song = list[title]; //获取曲谱数据 740 | renderSong(title); //生成曲谱面板 741 | $("#song-list").hide(); //隐藏歌曲列表 742 | $("#song-opern").show(); //显示曲谱面板 743 | $(".record-area").show(); 744 | $(".record-success").hide(); 745 | }); 746 | 747 | 748 | // 返回曲谱列表-事件绑定 749 | $("#song-opern").delegate(".select-another","click",function(e){ 750 | e.preventDefault(); 751 | showSongList(); 752 | }); 753 | 754 | 755 | // 显示歌曲列表，隐藏曲谱 756 | function showSongList(){ 757 | $("#song-opern").hide(); 758 | $("#song-list").show(); 759 | } 760 | 761 | // 点击试听(本地存储) 762 | $(".save_listen").click(function(){ 763 | var shareLink = $(this).data("list"); 764 | console.log(shareLink); 765 | var music = analysis(shareLink); 766 | listen(music); 767 | }); 768 | 769 | // 点击歌曲获得曲谱（本地存储） 770 | $("#list-info").delegate(".save_song a","click",function(){ 771 | var copyCon = $(".share_record").attr("href"); 772 | var flashvars = { 773 | content: encodeURIComponent(copyCon), 774 | uri: './images/copy.png' 775 | }; 776 | var params = { 777 | wmode: "transparent", 778 | allowScriptAccess: "always" 779 | }; 780 | swfobject.embedSWF("./js/clipboard.swf", "forLoadSwf", "120", "25", "9.0.0", null, flashvars, params); 781 | // 更新链接,触发分享函数（分享获取） 782 | // shareUrl = $(".share_record").attr("href"); 783 | // share(); 784 | }); 785 | 786 | 787 | // end 788 | }); 789 | 790 | 791 | 792 | // 提示tip 793 | // 提示收藏成功 794 | function savePopShow(tips,position,or){ 795 | var len = arguments.length; 796 | var oHide = ".save-success"; 797 | if(len ==3){ 798 | oHide = ".save-success"; 799 | }else{ 800 | oHide = ".save-fail"; 801 | } 802 | if(!$("#save-pop").length){ 803 | var saveHtml = '
    删除成功
    保存失败！
    '; 804 | } 805 | $("body").append(saveHtml); 806 | $('#save-pop').find(oHide).hide().siblings("div").fadeIn(300).html(tips); 807 | $('#save-pop').css('position','absolute') 808 | .css('top',position.top+5) 809 | .css('left',position.left-130) 810 | .css('background','#fafafa') 811 | .fadeIn('slow').delay(600).fadeOut('slow'); 812 | } 813 | // var position = $("#header").offset(); 814 | // savePopShow("删除成功",position); 815 | // savePopShow("删除失败",position,"error"); 816 | 817 | 818 | 819 | //flash复制功能回调函数 820 | // 分析：只能放最外面才生效。。 821 | function copySuccess(){ 822 | $(".share_record").data("copy", "true"); 823 | var position = $(".share_title").offset(); 824 | savePopShow("复制成功",position); 825 | } 826 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 弹钢琴留言板 - 轩枫阁 – 前端开发 | 歪密&农航亮 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
    22 | 132 | 133 | 134 | 135 |
    136 | 137 |
    138 | 139 |
    140 | 141 |

    轩枫阁-弹钢琴留言板


    142 |

    欢迎体验全新功能-弹钢琴。继续阅读查看教程，或者留言提交曲谱

    143 | 144 |

    好曲试听：还没有熟练弹奏的你赶紧先来听听吧

    145 | 213 | 214 |

    看谱弹琴：让每一个人都能弹奏出美妙的音乐!

    215 |
      216 |
    • （1）划过钢琴右侧的小三角，展开菜单，点击“看谱弹琴”
      • 217 |
    • （2）选择想弹奏的曲目
      • 218 |
    • （3）边看谱，边弹奏，你还可以点下面的“开始录制”，把你弹奏的曲子录下来。
      • 219 |
    220 | 221 |

    录制曲谱：不管你是钢琴高手，还是五音不全，你都可以录制下自己的音乐，并分享给自己的好友，共同传递梦想。

    222 |
      223 |
    • （1）划过钢琴右侧的小三角，展开菜单，点击“录制曲谱”
      • 224 |
    • （2）点击开始录制
      • 225 |
    • （3）用鼠标或键盘开始弹奏，弹奏完成后，点击完成录制
      • 226 |
    • （4）录制完成后，马上试听，听听效果如何
      • 227 |
    • （5）分享你的作品，你可以复制链接，发给你的好友、QQ群、论坛等，还可以分享给微博好友、QQ空间、人人网等；
      • 228 |
    229 | 230 |

    我的曲谱：不是弹完了就完了，无需登录点击即可保存，还不赶快试试

    231 |
      232 |
    • （1）在点击“完成录制”后，出现“本地保存”按钮，点击输入歌曲名并保存即可
      • 233 |
    • （2）划过钢琴右侧的小三角，展开菜单，点击“我的曲谱”，即可看到刚才已保存的曲子
      • 234 |
    • （3）点击歌曲，即可查看对应的曲谱，此时可以试听、删除曲谱、对着曲谱录制、分享给好友
      • 235 |
    • （4）小tip：因为是本地存储，所以在清除浏览器的应用数据之后就看不到保存的数据了，所以删除之前请先备份
      • 236 |
    237 | 238 |

    关于应用：总有点那么小故事

    239 |
      240 |
    • （1）本应用的创意和素材来自360，并添加了许多新功能
      • 241 |
    • （2）主要功能代码是博主开发编写的，近1300行js代码，后期优化完毕可以放至github
      • 242 |
    • （3）大家有什么好的想法和功能的更新请留言，目前有一个功能是曲谱高度过高需要翻页的问题，可以开发但是看大家有没有这个需求了
      • 243 |
    • （4）希望有音乐细胞的各位发挥才能，留言分享好的曲谱，我会陆续更新曲谱哟
      • 244 |
    245 | 246 |

    弹奏攻略：轩枫阁首页的“菜单钢琴”怎么弹？

    247 |
      248 |
    • （1）鼠标划过弹奏：从第一个“首页”到“关于&留言”，分别对应着do、re、mi、fa、so、la、si、高音do，高音re；
      • 249 |
    • （2）键盘A，S, D, F, G, H, J, K, L：分别对应着do、re、mi、fa、so、la、si、高音do，高音re；
      • 250 |
    • （3）键盘1-9：分别对应着do、re、mi、fa、so、la、si、高音do，高音re；
      • 251 |
    • （4）在录制想要保存的曲目过程中，歌词断句的地方请轻敲空格，使得保存后预览的曲谱更加美观易懂
      • 252 |
    • （5）为了达到最佳效果，请使用chrome弹奏，目前IE9不明原因抽风了，IE9和FF在单键短时输入时音效不好，后期会改进
      • 253 |
    254 | 255 |

    你录制了哪首歌曲呢？以 歌曲名+录制链接形式 留言，分享你的音乐，传递你的梦想！

    256 |
    257 |
    258 | 259 |
    260 | 261 |
    262 |
    263 |
    265 | 266 |
    267 | 268 | 269 | 270 | 271 | 272 | -------------------------------------------------------------------------------- /css/piano.css: -------------------------------------------------------------------------------- 1 | /*header 导航*/ 2 | body { 3 | background: #F1F1EF; 4 | } 5 | a { 6 | -webkit-transition: all 0.4s ease-in-out; 7 | -moz-transition: all 0.4s ease-in-out; 8 | -o-transition: all 0.4s ease-in-out; 9 | transition: all 0.4s ease-in-out; 10 | } 11 | a { 12 | color: #39c; 13 | text-decoration: none; 14 | } 15 | #header { 16 | width: 100%; 17 | height: 74px; 18 | position: relative; 19 | background: #eaebed; 20 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d4d7db'); 21 | background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d4d7db)); 22 | background: -moz-linear-gradient(top, #ffffff, #d4d7db); 23 | box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); 24 | } 25 | .progress { 26 | width: 100%; 27 | height: 2px; 28 | background: #29d; 29 | } 30 | #head { 31 | width: 980px; 32 | margin: 0 auto; 33 | } 34 | #head #logo { 35 | float: left; 36 | width: 140px; 37 | min-height: 60px; 38 | text-indent: -999em; 39 | background: url(../images/logo.png); 40 | } 41 | #head #logo a { 42 | width: 140px; 43 | min-height: 60px; 44 | display: block; 45 | } 46 | #nav { 47 | float: right; 48 | width: 810px; 49 | height: 70px; 50 | overflow: hidden; 51 | } 52 | #nav li { 53 | float: left; 54 | width: 90px; 55 | position: relative; 56 | display: inline-block; 57 | *zoom: 1; 58 | vertical-align: top; 59 | } 60 | #nav li a { 61 | position: relative; 62 | color: #333; 63 | text-decoration: none; 64 | text-align: center; 65 | line-height: 70px; 66 | font-family: "Microsoft YaHei"; 67 | font-size: 14px; 68 | display: block; 69 | z-index: 100; 70 | } 71 | .menu { 72 | display: block; 73 | zoom: 1; 74 | *zoom: 1; 75 | z-index: 100; 76 | overflow: hidden; 77 | position: relative; 78 | } 79 | .menupiano .hover-bg, 80 | .menu .hover-bg { 81 | top: 66px; 82 | position: absolute; 83 | left: 0px; 84 | width: 100%; 85 | height: 70px; 86 | z-index: -1; 87 | } 88 | .menupiano li:hover .hover-bg { 89 | top: 0px; 90 | } 91 | .menu li.menu-item-19 .hover-bg { 92 | background: #b9d329; 93 | } 94 | .menu li.menu-item-9 .hover-bg { 95 | background: #c0ebf7; 96 | } 97 | .menu li.menu-item-12 .hover-bg { 98 | background: #b9d329; 99 | } 100 | .menu li.menu-item-2813 .hover-bg { 101 | background: #69bcf3; 102 | } 103 | .menu li.menu-item-10 .hover-bg { 104 | background: #79d9f3; 105 | } 106 | .menu li.menu-item-1016 .hover-bg { 107 | background: #ffae5b; 108 | } 109 | .menu li.menu-item-13 .hover-bg { 110 | background: #acd180; 111 | } 112 | .menu li.menu-item-14 .hover-bg { 113 | background: #fab4cc; 114 | } 115 | .menu li.menu-item-164 .hover-bg { 116 | background: #66ccff; 117 | } 118 | 119 | 120 | 121 | 122 | 123 | /*页面css*/ 124 | .about_comment{ 125 | float: none; 126 | } 127 | #about_content h3{ 128 | font-size: 16px; 129 | margin-top: 20px 130 | } 131 | #about_content ul li{ 132 | line-height: 24px; 133 | /*list-style: square;*/ 134 | color: #666; 135 | margin-left: 25px; 136 | } 137 | #about_content .song_list{ 138 | overflow: hidden; 139 | } 140 | #about_content .song_list li{ 141 | float: left; 142 | width: 100px; 143 | height: 24px; 144 | line-height: 24px; 145 | } 146 | #about_content .song_list li a{ 147 | float: left; 148 | width: 84px; 149 | height: 24px; 150 | overflow: hidden; 151 | display: block; 152 | } 153 | .split{ 154 | float: left; 155 | padding-right: 9px; 156 | color: #bfbfbf; 157 | } 158 | 159 | 160 | 161 | .about_top { 162 | max-width: 1020px; 163 | width: 100%; 164 | height: auto; 165 | margin: 0 auto; 166 | margin-top: 4px; 167 | } 168 | .about_top img { 169 | display: block; 170 | width: 100%; 171 | } 172 | #about_content { 173 | max-width: 1000px; 174 | width: 94%; 175 | height: auto; 176 | background-color: #FFF; 177 | margin: 0 auto; 178 | padding: 0 10px; 179 | } 180 | 181 | 182 | .about_comment { 183 | float: left; 184 | width: 800px; 185 | height: 30px; 186 | line-height: 30px; 187 | margin: 100px 0 8px 40px; 188 | padding: 0px; 189 | font-size: 16px; 190 | font-family: "Microsoft YaHei"; 191 | color: #222; 192 | border-bottom: 1px solid #EAEAEA; 193 | position: relative; 194 | font-weight: normal; 195 | display: inline; 196 | overflow: hidden; 197 | } 198 | .about_weibo { 199 | font-size: 18px; 200 | } 201 | .about_weibo a { 202 | color: whitesmoke; 203 | text-decoration: none; 204 | } 205 | .about_weibo a:hover { 206 | color: #111; 207 | } 208 | .about_font { 209 | font-family: "Open Sans", sans-serif; 210 | } 211 | 212 | @media screen and (min-width: 480px) and (max-width: 768px) { 213 | #about_content { 214 | width: 90%; 215 | } 216 | } 217 | 218 | 219 | 220 | /*弹钢琴功能*/ 221 | .music_extra_nav { 222 | position: absolute; 223 | top: 30px; 224 | right: -42px; 225 | } 226 | .music_trangle { 227 | display: block; 228 | width: 0px; 229 | height: 0px; 230 | cursor: pointer; 231 | border-style: solid; 232 | border-width: 10px; 233 | border-color: #666 transparent transparent transparent; 234 | -webkit-transform-origin: 50% 25%; 235 | -moz-transform-origin: 50% 20%; 236 | -o-transform-origin: 50% 25%; 237 | transform-origin: 50% 25%; 238 | -webkit-transition: -webkit-transform 0.4s ease-in; 239 | /*-webkit-backface-visibility: hidden;*/ 240 | -moz-transition: -moz-transform 0.4s ease-in; 241 | -o-transition: -o-transform 0.4s ease-in; 242 | transition: transform 0.4s ease-in; 243 | } 244 | .trangle_hover { 245 | border-color: purple transparent transparent transparent; 246 | _border-color: #666 #f7f7f7 #f7f7f7 #f7f7f7; 247 | -webkit-transform: rotate(180deg); 248 | -moz-transform: rotate(180deg); 249 | -o-transform: rotate(180deg); 250 | transform: rotate(180deg); 251 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 252 | } 253 | .piano_extra { 254 | display: none; 255 | position: absolute; 256 | right: -32px; 257 | top: 42px; 258 | width: 70px; 259 | border: 1px solid #c8cacd; 260 | z-index: 9999; 261 | } 262 | .piano_extra li { 263 | /*width: 60px;*/ 264 | } 265 | .piano_extra li a { 266 | height: 30px; 267 | line-height: 30px; 268 | text-decoration: none; 269 | text-align: center; 270 | color: #666; 271 | display: block; 272 | background: rgba(235, 235, 235, 0.5); 273 | border-bottom: 1px solid #e2e2e2; 274 | } 275 | .piano_extra li a:hover { 276 | height: 30px; 277 | color: #39c; 278 | background: rgba(255, 255, 255, 0.5); 279 | } 280 | #music { 281 | position: relative; 282 | width: 980px; 283 | margin: 0 auto; 284 | font-family: "microsoft yahei"; 285 | } 286 | .piano_album { 287 | display: none; 288 | position: absolute; 289 | top: 74px; 290 | background: #fbfbfb; 291 | border: 1px solid #c9cbce; 292 | font-family: simsun; 293 | width: 978px; 294 | z-index: 9999; 295 | } 296 | .album_close { 297 | position: absolute; 298 | top: 4px; 299 | right: 4px; 300 | height: 22px; 301 | width: 22px; 302 | line-height: 22px; 303 | background: rgba(0, 0, 0, 0.5); 304 | color: #fff; 305 | font-size: 16px; 306 | overflow: hidden; 307 | text-align: center; 308 | font-family: arial; 309 | border-radius: 50%; 310 | cursor: pointer; 311 | z-index: 2; 312 | } 313 | .album_close:hover { 314 | background: #39c; 315 | font-weight: 500; 316 | } 317 | .album_choose { 318 | width: 980px; 319 | } 320 | .piano_function { 321 | display: none; 322 | position: relative; 323 | width: 980px; 324 | margin: 0 auto; 325 | text-align: center; 326 | } 327 | .piano_function a { 328 | /*display: none; 329 | float: left; 330 | width: 100px; 331 | height: 30px; 332 | color: #333; 333 | border: solid 1px #39c; 334 | margin: 0 10px; 335 | text-decoration: none; 336 | line-height: 30px; 337 | text-align: center;*/ 338 | /*font-weight: 700;*/ 339 | height: 30px; 340 | line-height: 30px; 341 | margin-right: 5px; 342 | width: 107px; 343 | cursor: pointer; 344 | font-family: "microsoft yahei"; 345 | } 346 | .piano_function a:hover { 347 | text-decoration: none; 348 | } 349 | .piano_function .start_record { 350 | /*display: block;*/ 351 | } 352 | /*qupu*/ 353 | .piano_function .record-area { 354 | padding-bottom: 18px; 355 | } 356 | .piano_function .record-state { 357 | color: #989898; 358 | font-size: 14px; 359 | font-weight: 400; 360 | height: 48px; 361 | line-height: 48px; 362 | text-align: center; 363 | } 364 | .piano_function .record-panel { 365 | height: 48px; 366 | line-height: 48px; 367 | text-align: center; 368 | } 369 | .piano_function .record-panel { 370 | line-height: 48px; 371 | text-align: center; 372 | } 373 | .piano_function .record-info { 374 | height: 18px; 375 | line-height: 12px; 376 | text-align: center; 377 | color: #f00; 378 | } 379 | #piano_function .record-panel .cancel-btn:hover { 380 | color: #e60012; 381 | text-decoration: underline; 382 | } 383 | .piano_function .record-panel .cancel-btn { 384 | color: #666; 385 | font-size: 14px; 386 | line-height: 30px; 387 | text-decoration: underline; 388 | } 389 | .piano_function .record-success { 390 | padding-top: 16px; 391 | } 392 | .piano_function .record-panel { 393 | height: 48px; 394 | line-height: 48px; 395 | text-align: center; 396 | } 397 | .piano_function .record-share { 398 | padding: 12px 0; 399 | height: 38px; 400 | text-align: center; 401 | } 402 | .piano_function .record-share .copy-link { 403 | background-position: 0 -253px; 404 | color: #f60; 405 | } 406 | .piano_function .record-share a:hover { 407 | color: #e60012; 408 | } 409 | .piano_function .record-share span { 410 | color: #666; 411 | text-align: center; 412 | font-family: "microsoft yahei"; 413 | } 414 | .piano_function .record-share a { 415 | width: auto; 416 | height: 25px; 417 | text-indent: 30px; 418 | color: #999; 419 | line-height: 25px; 420 | display: inline-block; 421 | background-image: url(../images/share_link.png); 422 | background-repeat: no-repeat; 423 | } 424 | .piano_function .record-share .sina-weibo { 425 | background-position: 0px 0px; 426 | } 427 | .piano_function .record-share .qq-weibo { 428 | background-position: -124px 0px; 429 | } 430 | .piano_function .record-share .qqzone { 431 | background-position: 0px -28px; 432 | } 433 | .piano_function .record-share .renren { 434 | background-position: -124px -28px; 435 | } 436 | .piano_function .record-share .share_record { 437 | display: none; 438 | } 439 | .share_title { 440 | /*display: none;*/ 441 | } 442 | .save_info { 443 | display: none; 444 | position: relative; 445 | top: 2px; 446 | width: 120px; 447 | font-size: 14px; 448 | height: 20px; 449 | line-height: 24px; 450 | padding: 4px; 451 | outline: none; 452 | border: solid 1px rgba(82, 168, 236, 0.8); 453 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); 454 | } 455 | .save_record_btn { 456 | display: none; 457 | text-decoration: underline; 458 | position: relative; 459 | top: 4px; 460 | margin-left: 16px; 461 | } 462 | .save_extra { 463 | display: none; 464 | position: absolute; 465 | right: 10px; 466 | margin-right: 20px; 467 | color: #88C209; 468 | cursor: pointer; 469 | } 470 | .save_listen { 471 | right: 60px; 472 | } 473 | #forLoadSwf { 474 | position: relative; 475 | top: 8px; 476 | } 477 | /*提示tip*/ 478 | #save-pop { 479 | z-index: 9999; 480 | } 481 | .save { 482 | width: auto; 483 | height: 38px; 484 | line-height: 38px; 485 | padding: 0px 10px 0px 35px; 486 | border: 1px solid #a0a0a0; 487 | -webkit-border-radius: 3px; 488 | -moz-border-radius: 3px; 489 | border-radius: 3px; 490 | z-index: 20003; 491 | box-shadow: 0 0 10px #777; 492 | } 493 | .save-success { 494 | z-index: 20003; 495 | background: transparent url(../images/success.gif) 10px center no-repeat; 496 | } 497 | .save-fail { 498 | z-index: 20003; 499 | background: transparent url(../images/fail.gif) 5px center no-repeat; 500 | } 501 | .song-list { 502 | font-family: "Microsoft yahei"; 503 | } 504 | .song-list h3 { 505 | padding-top: 5px; 506 | height: 36px; 507 | line-height: 36px; 508 | text-align: center; 509 | font-size: 14px; 510 | font-weight: bold; 511 | color: #656565; 512 | } 513 | .song-list ul { 514 | overflow: hidden; 515 | zoom: 1; 516 | padding: 0 0 8px 16px; 517 | } 518 | .song-list li { 519 | float: left; 520 | width: 12.3%; 521 | height: 28px; 522 | line-height: 28px; 523 | font-size: 14px; 524 | } 525 | .song-list .song a { 526 | color: #555; 527 | cursor: pointer; 528 | } 529 | .song-list .song a:hover { 530 | color: #39c; 531 | } 532 | .song-list .save_song a { 533 | cursor: pointer; 534 | } 535 | .song-list .save_song a:hover { 536 | color: #e60012; 537 | } 538 | .song-list .split { 539 | padding-right: 9px; 540 | color: #bfbfbf; 541 | } 542 | .song-list .mysong a { 543 | cursor: pointer; 544 | text-decoration: underline; 545 | color: #47b440; 546 | } 547 | .song-list .mysong a:hover { 548 | color: #e60012; 549 | } 550 | .song-list .star-demo { 551 | position: absolute; 552 | top: 10px; 553 | right: 45px; 554 | padding-left: 18px; 555 | background: url(http://p1.qhimg.com/t010f8b6a92180a0e23.png) no-repeat left 3px; 556 | } 557 | .song-opern { 558 | display: none; 559 | padding-bottom: 20px; 560 | border-bottom: 1px solid #f1f1f1; 561 | } 562 | .song-opern h3 { 563 | z-index: 1; 564 | position: relative; 565 | height: 36px; 566 | line-height: 36px; 567 | text-align: center; 568 | font-size: 14px; 569 | color: #656565; 570 | /*background:#fbfbfb;*/ 571 | } 572 | .song-opern .select-another { 573 | margin-left: 16px; 574 | font-size: 14px; 575 | font-weight: normal; 576 | color: #f60; 577 | cursor: pointer; 578 | } 579 | .song-opern dl { 580 | overflow: hidden; 581 | zoom: 1; 582 | margin: 0 auto; 583 | width: 88%; 584 | } 585 | .song-opern dt { 586 | display: inline; 587 | float: left; 588 | width: 56px; 589 | height: 26px; 590 | line-height: 26px; 591 | text-align: center; 592 | color: #989898; 593 | } 594 | .song-opern dd { 595 | display: inline; 596 | position: relative; 597 | float: left; 598 | margin-left: 12px; 599 | width: 10px; 600 | height: 26px; 601 | line-height: 26px; 602 | font-size: 18px; 603 | font-family: arial; 604 | color: #7a7a7a; 605 | } 606 | .song-opern .letter { 607 | padding-bottom: 10px; 608 | } 609 | .song-opern .number { 610 | margin-top: -1px; 611 | padding-top: 10px; 612 | border-top: 1px dotted #ddd; 613 | } 614 | .song-opern .number dd { 615 | color: #47b902; 616 | } 617 | .song-opern .high-pat:after { 618 | position: absolute; 619 | top: -12px; 620 | left: 2px; 621 | width: 5px; 622 | height: 5px; 623 | content: '•'; 624 | font-size: 14px; 625 | } 626 | .song-opern .piano-key { 627 | overflow: hidden; 628 | height: 38px; 629 | } 630 | .song-opern .piano-key li { 631 | position: relative; 632 | float: left; 633 | width: 108px; 634 | line-height: 46px; 635 | font-size: 20px; 636 | text-align: center; 637 | font-family: arial; 638 | color: #e0e0e0; 639 | } 640 | .song-opern .piano-key .high-pat:after { 641 | top: -14px; 642 | left: 50%; 643 | margin-left: -3px; 644 | font-size: 14px; 645 | } 646 | .song-opern .opern-from { 647 | display: none; 648 | position: absolute; 649 | bottom: 6px; 650 | right: 14px; 651 | color: #999; 652 | } 653 | .song-opern .opern-from a { 654 | color: #999; 655 | } 656 | .song-opern .opern-from a:hover, 657 | .song-opern .opern-from a:active { 658 | color: #f00; 659 | } 660 | @-webkit-keyframes glowing { 661 | /* line 8, ../scss/partials/_glow.scss */ 662 | from { 663 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 664 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 665 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 666 | } 667 | /* line 9, ../scss/partials/_glow.scss */ 668 | 50% { 669 | -webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 670 | -moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 671 | box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 672 | } 673 | /* line 10, ../scss/partials/_glow.scss */ 674 | to { 675 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 676 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 677 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 678 | } 679 | } 680 | @-khtml-keyframes glowing { 681 | /* line 14, ../scss/partials/_glow.scss */ 682 | from { 683 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 684 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 685 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 686 | } 687 | /* line 15, ../scss/partials/_glow.scss */ 688 | 50% { 689 | -webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 690 | -moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 691 | box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 692 | } 693 | /* line 16, ../scss/partials/_glow.scss */ 694 | to { 695 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 696 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 697 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 698 | } 699 | } 700 | @-moz-keyframes glowing { 701 | /* line 20, ../scss/partials/_glow.scss */ 702 | from { 703 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 704 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 705 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 706 | } 707 | /* line 21, ../scss/partials/_glow.scss */ 708 | 50% { 709 | -webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 710 | -moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 711 | box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 712 | } 713 | /* line 22, ../scss/partials/_glow.scss */ 714 | to { 715 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 716 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 717 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 718 | } 719 | } 720 | @-ms-keyframes glowing { 721 | /* line 26, ../scss/partials/_glow.scss */ 722 | from { 723 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 724 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 725 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 726 | } 727 | /* line 27, ../scss/partials/_glow.scss */ 728 | 50% { 729 | -webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 730 | -moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 731 | box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 732 | } 733 | /* line 28, ../scss/partials/_glow.scss */ 734 | to { 735 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 736 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 737 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 738 | } 739 | } 740 | @-o-keyframes glowing { 741 | /* line 32, ../scss/partials/_glow.scss */ 742 | from { 743 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 744 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 745 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 746 | } 747 | /* line 33, ../scss/partials/_glow.scss */ 748 | 50% { 749 | -webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 750 | -moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 751 | box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 752 | } 753 | /* line 34, ../scss/partials/_glow.scss */ 754 | to { 755 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 756 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 757 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 758 | } 759 | } 760 | @keyframes glowing { 761 | /* line 38, ../scss/partials/_glow.scss */ 762 | from { 763 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 764 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 765 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 766 | } 767 | /* line 39, ../scss/partials/_glow.scss */ 768 | 50% { 769 | -webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 770 | -moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 771 | box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2); 772 | } 773 | /* line 40, ../scss/partials/_glow.scss */ 774 | to { 775 | -webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 776 | -moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 777 | box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2); 778 | } 779 | } 780 | /* line 25, ../scss/partials/_buttons.scss */ 781 | .piano_button { 782 | -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); 783 | -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); 784 | box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); 785 | background-color: #eeeeee; 786 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfbfb), color-stop(100%, #e1e1e1)); 787 | background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1); 788 | background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1); 789 | background: -o-linear-gradient(top, #fbfbfb, #e1e1e1); 790 | background: linear-gradient(top, #fbfbfb, #e1e1e1); 791 | display: -moz-inline-stack; 792 | display: inline-block; 793 | vertical-align: middle; 794 | *vertical-align: auto; 795 | zoom: 1; 796 | *display: inline; 797 | border: 1px solid #d4d4d4; 798 | height: 32px; 799 | line-height: 32px; 800 | /*padding: 0px 25.6px;*/ 801 | font-weight: 300; 802 | font-size: 14px; 803 | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 804 | color: #666666; 805 | text-shadow: 0 1px 1px white; 806 | margin: 0; 807 | text-decoration: none; 808 | text-align: center; 809 | } 810 | /* line 43, ../scss/partials/_buttons.scss */ 811 | .piano_button:hover { 812 | background-color: #eeeeee; 813 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dcdcdc)); 814 | background: -webkit-linear-gradient(top, #ffffff, #dcdcdc); 815 | background: -moz-linear-gradient(top, #ffffff, #dcdcdc); 816 | background: -o-linear-gradient(top, #ffffff, #dcdcdc); 817 | background: linear-gradient(top, #ffffff, #dcdcdc); 818 | } 819 | /* line 47, ../scss/partials/_buttons.scss */ 820 | .piano_button:active { 821 | -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px #ffffff; 822 | -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px #ffffff; 823 | box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px #ffffff; 824 | text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4); 825 | background: #eeeeee; 826 | color: #bbbbbb; 827 | } 828 | /* line 53, ../scss/partials/_buttons.scss */ 829 | .piano_button:focus { 830 | outline: none; 831 | } 832 | /* line 59, ../scss/partials/_buttons.scss */ 833 | input.piano_button, 834 | button.piano_button { 835 | height: 34px; 836 | cursor: pointer; 837 | } 838 | /* line 100, ../scss/partials/_buttons.scss */ 839 | .button-rounded { 840 | -webkit-border-radius: 3px; 841 | -moz-border-radius: 3px; 842 | -ms-border-radius: 3px; 843 | -o-border-radius: 3px; 844 | border-radius: 3px; 845 | } 846 | /* line 160, ../scss/partials/_buttons.scss */ 847 | .button-flat { 848 | -webkit-box-shadow: none; 849 | -moz-box-shadow: none; 850 | box-shadow: none; 851 | -webkit-transition-property: background; 852 | -moz-transition-property: background; 853 | -o-transition-property: background; 854 | transition-property: background; 855 | -webkit-transition-duration: 0.3s; 856 | -moz-transition-duration: 0.3s; 857 | -o-transition-duration: 0.3s; 858 | transition-duration: 0.3s; 859 | background: #eeeeee; 860 | border: none; 861 | text-shadow: none; 862 | } 863 | /* line 169, ../scss/partials/_buttons.scss */ 864 | .button-flat:hover { 865 | background: #fbfbfb; 866 | } 867 | /* line 172, ../scss/partials/_buttons.scss */ 868 | .button-flat:active { 869 | -webkit-transition-duration: 0s; 870 | -moz-transition-duration: 0s; 871 | -o-transition-duration: 0s; 872 | transition-duration: 0s; 873 | background: #eeeeee; 874 | color: #bbbbbb; 875 | } 876 | /* line 177, ../scss/partials/_buttons.scss */ 877 | .button-flat.disabled { 878 | -webkit-box-shadow: none; 879 | -moz-box-shadow: none; 880 | box-shadow: none; 881 | } 882 | /* line 189, ../scss/partials/_buttons.scss */ 883 | .button-flat-primary { 884 | -webkit-box-shadow: none; 885 | -moz-box-shadow: none; 886 | box-shadow: none; 887 | -webkit-transition-property: background; 888 | -moz-transition-property: background; 889 | -o-transition-property: background; 890 | transition-property: background; 891 | -webkit-transition-duration: 0.3s; 892 | -moz-transition-duration: 0.3s; 893 | -o-transition-duration: 0.3s; 894 | transition-duration: 0.3s; 895 | background: #00a1cb; 896 | color: white; 897 | text-shadow: none; 898 | border: none; 899 | } 900 | /* line 198, ../scss/partials/_buttons.scss */ 901 | .button-flat-primary:hover { 902 | background: #00b5e5; 903 | } 904 | /* line 201, ../scss/partials/_buttons.scss */ 905 | .button-flat-primary:active { 906 | -webkit-transition-duration: 0s; 907 | -moz-transition-duration: 0s; 908 | -o-transition-duration: 0s; 909 | transition-duration: 0s; 910 | background: #1495b7; 911 | color: #00647f; 912 | } 913 | /* line 206, ../scss/partials/_buttons.scss */ 914 | .button-flat-primary.disabled { 915 | -webkit-box-shadow: none; 916 | -moz-box-shadow: none; 917 | box-shadow: none; 918 | } 919 | /* line 189, ../scss/partials/_buttons.scss */ 920 | .button-flat-action { 921 | -webkit-box-shadow: none; 922 | -moz-box-shadow: none; 923 | box-shadow: none; 924 | -webkit-transition-property: background; 925 | -moz-transition-property: background; 926 | -o-transition-property: background; 927 | transition-property: background; 928 | -webkit-transition-duration: 0.3s; 929 | -moz-transition-duration: 0.3s; 930 | -o-transition-duration: 0.3s; 931 | transition-duration: 0.3s; 932 | background: #7db500; 933 | color: white; 934 | text-shadow: none; 935 | border: none; 936 | } 937 | /* line 198, ../scss/partials/_buttons.scss */ 938 | .button-flat-action:hover { 939 | background: #8fcf00; 940 | } 941 | /* line 201, ../scss/partials/_buttons.scss */ 942 | .button-flat-action:active { 943 | -webkit-transition-duration: 0s; 944 | -moz-transition-duration: 0s; 945 | -o-transition-duration: 0s; 946 | transition-duration: 0s; 947 | background: #76a312; 948 | color: #486900; 949 | } 950 | /* line 206, ../scss/partials/_buttons.scss */ 951 | .button-flat-action.disabled { 952 | -webkit-box-shadow: none; 953 | -moz-box-shadow: none; 954 | box-shadow: none; 955 | } 956 | /* line 189, ../scss/partials/_buttons.scss */ 957 | .button-flat-highlight { 958 | -webkit-box-shadow: none; 959 | -moz-box-shadow: none; 960 | box-shadow: none; 961 | -webkit-transition-property: background; 962 | -moz-transition-property: background; 963 | -o-transition-property: background; 964 | transition-property: background; 965 | -webkit-transition-duration: 0.3s; 966 | -moz-transition-duration: 0.3s; 967 | -o-transition-duration: 0.3s; 968 | transition-duration: 0.3s; 969 | background: #f18d05; 970 | color: white; 971 | text-shadow: none; 972 | border: none; 973 | } 974 | /* line 198, ../scss/partials/_buttons.scss */ 975 | .button-flat-highlight:hover { 976 | background: #fa9915; 977 | } 978 | /* line 201, ../scss/partials/_buttons.scss */ 979 | .button-flat-highlight:active { 980 | -webkit-transition-duration: 0s; 981 | -moz-transition-duration: 0s; 982 | -o-transition-duration: 0s; 983 | transition-duration: 0s; 984 | background: #d8891e; 985 | color: #a66103; 986 | } 987 | /* line 206, ../scss/partials/_buttons.scss */ 988 | .button-flat-highlight.disabled { 989 | -webkit-box-shadow: none; 990 | -moz-box-shadow: none; 991 | box-shadow: none; 992 | } 993 | /* line 189, ../scss/partials/_buttons.scss */ 994 | .button-flat-caution { 995 | -webkit-box-shadow: none; 996 | -moz-box-shadow: none; 997 | box-shadow: none; 998 | -webkit-transition-property: background; 999 | -moz-transition-property: background; 1000 | -o-transition-property: background; 1001 | transition-property: background; 1002 | -webkit-transition-duration: 0.3s; 1003 | -moz-transition-duration: 0.3s; 1004 | -o-transition-duration: 0.3s; 1005 | transition-duration: 0.3s; 1006 | background: #e54028; 1007 | color: white; 1008 | text-shadow: none; 1009 | border: none; 1010 | } 1011 | /* line 198, ../scss/partials/_buttons.scss */ 1012 | .button-flat-caution:hover { 1013 | background: #e8543f; 1014 | } 1015 | /* line 201, ../scss/partials/_buttons.scss */ 1016 | .button-flat-caution:active { 1017 | -webkit-transition-duration: 0s; 1018 | -moz-transition-duration: 0s; 1019 | -o-transition-duration: 0s; 1020 | transition-duration: 0s; 1021 | background: #cd5240; 1022 | color: #ac2815; 1023 | } 1024 | /* line 206, ../scss/partials/_buttons.scss */ 1025 | .button-flat-caution.disabled { 1026 | -webkit-box-shadow: none; 1027 | -moz-box-shadow: none; 1028 | box-shadow: none; 1029 | } 1030 | /* line 189, ../scss/partials/_buttons.scss */ 1031 | .button-flat-royal { 1032 | -webkit-box-shadow: none; 1033 | -moz-box-shadow: none; 1034 | box-shadow: none; 1035 | -webkit-transition-property: background; 1036 | -moz-transition-property: background; 1037 | -o-transition-property: background; 1038 | transition-property: background; 1039 | -webkit-transition-duration: 0.3s; 1040 | -moz-transition-duration: 0.3s; 1041 | -o-transition-duration: 0.3s; 1042 | transition-duration: 0.3s; 1043 | background: #87318c; 1044 | color: white; 1045 | text-shadow: none; 1046 | border: none; 1047 | } 1048 | /* line 198, ../scss/partials/_buttons.scss */ 1049 | .button-flat-royal:hover { 1050 | background: #99389f; 1051 | } 1052 | /* line 201, ../scss/partials/_buttons.scss */ 1053 | .button-flat-royal:active { 1054 | -webkit-transition-duration: 0s; 1055 | -moz-transition-duration: 0s; 1056 | -o-transition-duration: 0s; 1057 | transition-duration: 0s; 1058 | background: #764479; 1059 | color: #501d53; 1060 | } 1061 | /* line 206, ../scss/partials/_buttons.scss */ 1062 | .button-flat-royal.disabled { 1063 | -webkit-box-shadow: none; 1064 | -moz-box-shadow: none; 1065 | box-shadow: none; 1066 | } 1067 | /* line 221, ../scss/partials/_buttons.scss */ 1068 | .button-large { 1069 | font-size: 19px; 1070 | height: 38.4px; 1071 | line-height: 38.4px; 1072 | padding: 0px 30.72px; 1073 | } 1074 | /* line 245, ../scss/partials/_buttons.scss */ 1075 | input.button-large, 1076 | button.button-large { 1077 | height: 40.4px; 1078 | } 1079 | /* line 221, ../scss/partials/_buttons.scss */ 1080 | .button-small { 1081 | font-size: 16px; 1082 | height: 25.6px; 1083 | line-height: 25.6px; 1084 | padding: 0px 20.48px; 1085 | } 1086 | /* line 245, ../scss/partials/_buttons.scss */ 1087 | input.button-small, 1088 | button.button-small { 1089 | height: 27.6px; 1090 | } 1091 | /* line 221, ../scss/partials/_buttons.scss */ 1092 | .button-tiny { 1093 | font-size: 12px; 1094 | height: 22.4px; 1095 | line-height: 22.4px; 1096 | padding: 0px 17.92px; 1097 | } 1098 | /* line 245, ../scss/partials/_buttons.scss */ 1099 | input.button-tiny, 1100 | button.button-tiny { 1101 | height: 24.4px; 1102 | } 1103 | /* line 265, ../scss/partials/_buttons.scss */ 1104 | .button.glow { 1105 | -webkit-animation-duration: 3s; 1106 | -moz-animation-duration: 3s; 1107 | -ms-animation-duration: 3s; 1108 | -o-animation-duration: 3s; 1109 | animation-duration: 3s; 1110 | -webkit-animation-iteration-count: infinite; 1111 | -khtml-animation-iteration-count: infinite; 1112 | -moz-animation-iteration-count: infinite; 1113 | -ms-animation-iteration-count: infinite; 1114 | -o-animation-iteration-count: infinite; 1115 | animation-iteration-count: infinite; 1116 | -webkit-animation-name: glowing; 1117 | -khtml-animation-name: glowing; 1118 | -moz-animation-name: glowing; 1119 | -ms-animation-name: glowing; 1120 | -o-animation-name: glowing; 1121 | animation-name: glowing; 1122 | } 1123 | /* line 268, ../scss/partials/_buttons.scss */ 1124 | .button.glow:active { 1125 | -webkit-animation-name: none; 1126 | -moz-animation-name: none; 1127 | -ms-animation-name: none; 1128 | -o-animation-name: none; 1129 | animation-name: none; 1130 | -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px #ffffff; 1131 | -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px #ffffff; 1132 | box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px #ffffff; 1133 | } 1134 | 1135 | 1136 | /*footer*/ 1137 | #footer { 1138 | clear: both; 1139 | width: 100%; 1140 | margin-top: 20px; 1141 | } 1142 | #footer .foot_gradient { 1143 | width: 100%; 1144 | height: 100px; 1145 | background: url(../images/gradient.png) repeat-x; 1146 | } 1147 | #footer #foot { 1148 | width: 100%; 1149 | height: 158px; 1150 | text-align: center; 1151 | background: url(../images/footer.jpg) center center repeat-x; 1152 | } 1153 | #footer #foot span { 1154 | color: #999; 1155 | font-size: 13px; 1156 | line-height: 158px; 1157 | } 1158 | #footer #foot span a { 1159 | color: #39c; 1160 | } -------------------------------------------------------------------------------- /js/jquery-1.9.0.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v1.9.0 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license */(function(e,t){"use strict";function n(e){var t=e.length,n=st.type(e);return st.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}function r(e){var t=Tt[e]={};return st.each(e.match(lt)||[],function(e,n){t[n]=!0}),t}function i(e,n,r,i){if(st.acceptData(e)){var o,a,s=st.expando,u="string"==typeof n,l=e.nodeType,c=l?st.cache:e,f=l?e[s]:e[s]&&s;if(f&&c[f]&&(i||c[f].data)||!u||r!==t)return f||(l?e[s]=f=K.pop()||st.guid++:f=s),c[f]||(c[f]={},l||(c[f].toJSON=st.noop)),("object"==typeof n||"function"==typeof n)&&(i?c[f]=st.extend(c[f],n):c[f].data=st.extend(c[f].data,n)),o=c[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[st.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[st.camelCase(n)])):a=o,a}}function o(e,t,n){if(st.acceptData(e)){var r,i,o,a=e.nodeType,u=a?st.cache:e,l=a?e[st.expando]:st.expando;if(u[l]){if(t&&(r=n?u[l]:u[l].data)){st.isArray(t)?t=t.concat(st.map(t,st.camelCase)):t in r?t=[t]:(t=st.camelCase(t),t=t in r?[t]:t.split(" "));for(i=0,o=t.length;o>i;i++)delete r[t[i]];if(!(n?s:st.isEmptyObject)(r))return}(n||(delete u[l].data,s(u[l])))&&(a?st.cleanData([e],!0):st.support.deleteExpando||u!=u.window?delete u[l]:u[l]=null)}}}function a(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(Nt,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:wt.test(r)?st.parseJSON(r):r}catch(o){}st.data(e,n,r)}else r=t}return r}function s(e){var t;for(t in e)if(("data"!==t||!st.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}function u(){return!0}function l(){return!1}function c(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}function f(e,t,n){if(t=t||0,st.isFunction(t))return st.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return st.grep(e,function(e){return e===t===n});if("string"==typeof t){var r=st.grep(e,function(e){return 1===e.nodeType});if(Wt.test(t))return st.filter(t,r,!n);t=st.filter(t,r)}return st.grep(e,function(e){return st.inArray(e,t)>=0===n})}function p(e){var t=zt.split("|"),n=e.createDocumentFragment();if(n.createElement)for(;t.length;)n.createElement(t.pop());return n}function d(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function h(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified)+"/"+e.type,e}function g(e){var t=nn.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function m(e,t){for(var n,r=0;null!=(n=e[r]);r++)st._data(n,"globalEval",!t||st._data(t[r],"globalEval"))}function y(e,t){if(1===t.nodeType&&st.hasData(e)){var n,r,i,o=st._data(e),a=st._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)st.event.add(t,n,s[n][r])}a.data&&(a.data=st.extend({},a.data))}}function v(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!st.support.noCloneEvent&&t[st.expando]){r=st._data(t);for(i in r.events)st.removeEvent(t,i,r.handle);t.removeAttribute(st.expando)}"script"===n&&t.text!==e.text?(h(t).text=e.text,g(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),st.support.html5Clone&&e.innerHTML&&!st.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Zt.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}function b(e,n){var r,i,o=0,a=e.getElementsByTagName!==t?e.getElementsByTagName(n||"*"):e.querySelectorAll!==t?e.querySelectorAll(n||"*"):t;if(!a)for(a=[],r=e.childNodes||e;null!=(i=r[o]);o++)!n||st.nodeName(i,n)?a.push(i):st.merge(a,b(i,n));return n===t||n&&st.nodeName(e,n)?st.merge([e],a):a}function x(e){Zt.test(e.type)&&(e.defaultChecked=e.checked)}function T(e,t){if(t in e)return t;for(var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Nn.length;i--;)if(t=Nn[i]+n,t in e)return t;return r}function w(e,t){return e=t||e,"none"===st.css(e,"display")||!st.contains(e.ownerDocument,e)}function N(e,t){for(var n,r=[],i=0,o=e.length;o>i;i++)n=e[i],n.style&&(r[i]=st._data(n,"olddisplay"),t?(r[i]||"none"!==n.style.display||(n.style.display=""),""===n.style.display&&w(n)&&(r[i]=st._data(n,"olddisplay",S(n.nodeName)))):r[i]||w(n)||st._data(n,"olddisplay",st.css(n,"display")));for(i=0;o>i;i++)n=e[i],n.style&&(t&&"none"!==n.style.display&&""!==n.style.display||(n.style.display=t?r[i]||"":"none"));return e}function C(e,t,n){var r=mn.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function k(e,t,n,r,i){for(var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;4>o;o+=2)"margin"===n&&(a+=st.css(e,n+wn[o],!0,i)),r?("content"===n&&(a-=st.css(e,"padding"+wn[o],!0,i)),"margin"!==n&&(a-=st.css(e,"border"+wn[o]+"Width",!0,i))):(a+=st.css(e,"padding"+wn[o],!0,i),"padding"!==n&&(a+=st.css(e,"border"+wn[o]+"Width",!0,i)));return a}function E(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=ln(e),a=st.support.boxSizing&&"border-box"===st.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=un(e,t,o),(0>i||null==i)&&(i=e.style[t]),yn.test(i))return i;r=a&&(st.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+k(e,t,n||(a?"border":"content"),r,o)+"px"}function S(e){var t=V,n=bn[e];return n||(n=A(e,t),"none"!==n&&n||(cn=(cn||st("