The Eastern Olympic Games held in full swing, can not go to the scene, let’s move fingers, playing a “wan Jiang” athletes cheer!
Results the preview
Can support the mouse slide and keyboard click events, can see the keyboard corresponding place to slide up, issued the corresponding syllables
Technical introduction and resource preparation
Jquery.js (yyds) ⅱ. Mp3 resource of 1-7 syllables ⅲ. H5 play method: The play method is provided by H5, jQ does not encapsulate the corresponding method, so the JQ object needs to be converted into a DOM object
Keyboard event implementation ideas:
1. Register keyDown for keyboard numbers 1-7 and trigger mouseEnter 2 of Li for corresponding NAV. Register keyup for keyboard numbers 1-7, triggering the mouseleave of Li corresponding to nav
The HTML code section is as follows
<div class="nav"> <ul> <li><a href="javascript:void(0);" >1</a><span></span></li> <li><a href="javascript:void(0);" >2</a><span></span></li> <li><a href="javascript:void(0);" >3</a><span></span></li> <li><a href="javascript:void(0);" >4</a><span></span></li> <li><a href="javascript:void(0);" >5</a><span></span></li> <li><a href="javascript:void(0);" >6</a><span></span></li> <li><a href="javascript:void(0);" > 7 < / a > < span > < / span > < / li > < / ul > < div class = "maps" > < img SRC = "xinjiang. JPG" Alt = "" > < / div > < div class =" mp3 "> < audio src="mp3/1.mp3"></audio> <audio src="mp3/2.mp3"></audio> <audio src="mp3/3.mp3"></audio> <audio src="mp3/4.mp3"></audio> <audio src="mp3/5.mp3"></audio> <audio src="mp3/6.mp3"></audio> <audio src="mp3/7.mp3"></audio> </div> </div> <script src=".. / jquery - 1.12.4. Js "> < / script >Copy the codeRealize the function of cyclic switching by clicking on the music:
var index = 0; Var arrs = ["1.jpg", "1.jpg", "3.jpg"]; $(".maps img").click(function() { index++; if (index === arrs.length) { index = 0; } $(this).attr("src", arrs[index]) })Copy the codeMouse event – syllable animation function
Register mouseleave event for all Li under nav (top=60) and make a custom animation for span under nav (top=60)
$(".nav li").mouseEnter (function() {$(this).children("span").stop().animate({top: animate). 0}); Var idx = $(this).index(); $(".mp3 ").get(idx).currentTime = 0; $(".mp3 ").get(idx).currenttime = 0; $(".mp3 audio").get(idx).play(); }) $(".nav li").mouseleave(function() {// stop() make sure to stop the animation being performed, $(this).children("span").stop().animate({top: 60}); })Copy the codeKeyboard event – syllable animation function
Implementation approach: give the keyboard figure 1-7 registered keydown, triggering the corresponding nav li mouseenter to keyboard number 1-7 registered keyup, triggering the corresponding nav mouseleave li
$(document).keydown(function(e) { var keyCode = e.keyCode; If (keyCode <= 55 && keyCode >= 49) {var index = keyCode - 49; $(".nav li").eq(index).trigger(" mouseEnter "); }}); $(document).keyup(function(e) {var keyCode = e.keyCode; If (keyCode <= 55 && keyCode >= 49) {var index = keyCode - 49; $(".nav li").eq(index).trigger("mouseleave"); $(".nav li").eq(index).trigger("mouseleave"); }}Copy the codeSo far, the online piano production is completed, digging friends, there is a need for resources themselves. 3asy
conclusion
The country is getting stronger and stronger, this is also the confidence of every Chinese people, let us cheer for the Olympic athletes, the country will be stronger and stronger!!