JQuery and jquery

JQuery and jquery

Winnie the Pooh puzzle 21:59:48

JQuery code implements a jigsaw puzzle game. You can click the mouse to select a tile and move it with the upper and lower keys.

 

Effect display Html code

1 <div id = "box-div"> 2 <! -- Prompt when you cannot get through! --> 3 <div id = "tips"> 4 <p>! </P> 5 </div> 6 <div id = "container"> 7 <div class = "row"> 8 <div class = "unit">  </div> 9 <div class =" unit ">  </div> 10 <div class =" unit ">  </div> 11 </div> 12 <div class =" row "> 13 <div class =" unit ">  </div> 14 <div class =" unit ">  </div> 15 <div class =" unit ">  </div> 16 </div> 17 <div class =" row "> 18 <div class =" unit ">  </div> 19 <div class =" unit ">  </div> 20 <div class =" unit ">  </div> 21 </div> 22 </div> 23 </div

1 # box-div {2 position: relative; 3 width: 508px; 4 height: 631px; 5 margin: 0 auto; 6} 7 8 # container {9 width: 508px; 10 height: 631px; 11 margin: 0 auto; 12-webkit-box-sizing: border-box; 13-moz-box-sizing: border-box; 14 box-sizing: border-box; 15 border: 1px solid # d5e0e6; 16} 17 18 # container>. row {19 display:-webkit-box; 20 white-space: nowrap; 21} 22 23 # container>. row>. unit {24 width: 169px; 25 height: 209px; 26 display: inline-block \ 9;/* compatible with IE9/10 */27 vertical-align: top \ 9; /* compatible with IE9/10 */28 box-sizing: border-box; 29 border: 1px solid rgba (7,157,239, 0); 30} 31 32 # container>. row>. unit. move {33 border: 1px solid rgba (7,157,239, 1); 34} 35 36 # tips {37 width: 200px; 38 height: 50px; 39 background: rgb (152,206, 50); 40 position: absolute; 41 z-index: 5; 42 top:-50px; 43 left: calc (50%-100px); 44 opacity: 0; 45} 46 47 # tips> p {48 margin: 0; 49 line-height: 50px; 50 text-align: center; 51 color: white; 52} 53. directions {54 width: 50%; 55 margin: 0 auto; 56 text-align: center; 57 line-height: 30px; 58 color: white; 59 background-color: # a7cbf0; 60}

  Jquery code

1 $ ("# container>. row>. unit> img "). each (function () {2 $ (this ). click (function (event) {3 event. stopPropagation (); 4 $ (". unit "). removeClass ("move"); 5 $ (this ). parent (". unit "). addClass ("move"); 6}) 7}); 8 move (". move "," # tips "); 9 function move (className, idName) {10/* prompt message */11 function tipsAlert (idName) {12 $ (idName ). animate ({top: "0", opacity: "1"}, 500); 13 setTimeout (function () {14 $ (idName ). animations ({top: "-50px", opacity: "0"}, 800); 15}, 1000) 16} 17/* Move Up, down, left, and right buttons */18 $ (document ). keydown (function (e) {19 var code = e. keyCode; 20 if (code> 40 | code <37) {21 return false; 22} 23 var prev = $ (className) [0]. previuselementsibling; // check whether the prefix element of the selected element exists to determine whether the element can be moved around 24 var next =$ (className) [0]. nextElementSibling; // check whether the rear-position element of the selected element exists to determine whether the element can be moved about 25 var paprev = $ (className ). parent () [0]. previuselementsibling; // check whether the parent-level prefix element of the selected element exists to determine whether the element can be moved up or down 26 var panext =$ (className ). parent () [0]. nextElementSibling; // check whether the parent-level post-position element of the selected element exists to determine whether the element can be moved up or down 27 var index = $ (className ). index (); // Based on the index value of the selected element, determine the position of the swap when moving up or down. 28 var movenDiv =$ (className ). next () [0]; // determine the method for adding up and down swap elements 29 var movepDiv =$ (className ). prev () [0]; // determine the upper and lower swap element adding method 30 switch (code) {31 case 37: // left 32 if (prev) {33 $ (className ). insertBefore (prev); 34} else {35 tipsAlert (idName); 36} 37 break; 38 case 38: // top 39 if (paprev) {40 var exchangeTop = $ (paprev ). children () [index]; 41 $ (className ). insertBefore (exchangeTop); 42 if (movenDiv) {43 $ (exchangeTop ). insertBefore (movenDiv); 44} else {45 $ (exchangeTop ). insertAfter (movepDiv) 46} 47 48} else {49 tipsAlert (idName); 50} 51 break; 52 case 39: // right 53 if (next) {54 $ (className ). insertAfter (next); 55} else {56 tipsAlert (idName) 57} 58 break; 59 case 40: // lower 60 if (panext) {61 var exchangeBottom = $ (panext ). children () [index]; 62 $ (className ). insertBefore (exchangeBottom); 63 if (movenDiv) {64 $ (exchangeBottom ). insertBefore (movenDiv); 65} else {66 $ (exchangeBottom ). insertAfter (movepDiv) 67} 68} else {69 tipsAlert (idName); 70} 71 break; 72 73} 74}); 75 76 77}

Cainiao only for your reference. Please leave a message for better code suggestions. Thank you!