标签：
案例地址：http://wanwanweb.sinaapp.com/ygcard/
源码在下方仅供参考，自己动手设计一款类似的版式，然后亲自动手试一下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 5 <title>ygcard</title> 6 <script type="text/javascript" src="../ygnba/js/jquery.js"></script> 7 <style type="text/css"> 8 9 *{ 10 margin: 0; 11 padding: 0; 12 list-style: none; 13 font-size: 12px; 14 } 15 16 body{ 17 background-color: #000; 18 } 19 20 #main{ 21 width: 1280px; 22 height: 744px; 23 margin: 0 auto; 24 background: url("../ygcard/images/bj.jpg"); 25 padding-top:10px; 26 position: relative; 27 } 28 29 .gameTable{ 30 width: 880px; 31 height: 685px; 32 margin: 0px auto; 33 } 34 35 .liA ul li{ 36 float: left; 37 margin-right: 45px; 38 } 39 40 .liA ul li.end{ 41 margin-right: 0px; 42 float: right; 43 } 44 45 .liB ul li{ 46 float: left; 47 margin-right: 45px; 48 margin-top: 5px; 49 } 50 51 .end{ 52 margin-right: 0px; 53 float: right; 54 } 55 56 57 .play{ 58 margin: 0 auto; 59 width: 200px; 60 height: 50px; 61 line-height: 50px; 62 font-size: 24px; 63 font-family:"微软雅黑"; 64 color:#fff; 65 } 66 67 .play .toubi{ 68 float:left; 69 line-height: 50px; 70 font-size: 18px; 71 font-family:"微软雅黑"; 72 } 73 74 .play .icon{ 75 float: left; 76 cursor: pointer; 77 } 78 79 .play .win{ 80 float:left; 81 color:#fff; 82 line-height: 50px; 83 font-size: 24px; 84 font-family:"微软雅黑"; 85 } 86 87 .play .footer{ 88 clear: both; 89 } 90 91 #showMsg{ 92 position: absolute; 93 left:600px; 94 top:0px; 95 visibility:hidden; 96 } 97 98 #mask{ 99 position: absolute; 100 left: 0; 101 top: 0; 102 width: 1280px; 103 height: 700px; 104 z-index: 100; 105 visibility: hidden; 106 text-align: center; 107 padding-top: 100px; 108 } 109 110 #mask img{ 111 visibility: hidden; 112 } 113 114 </style> 115 <body> 116 <div id="main"> 117 <ul class = "gameTable"> 118 <li class = "liA"> 119 <ul> 120 <li class="lis"><img src="../ygcard/images/img1.png"/></li> 121 <li class="lis"><img src="../ygcard/images/img1.png"/></li> 122 <li class="lis"><img src="../ygcard/images/img1.png"/></li> 123 <li class="lis"><img src="../ygcard/images/img1.png"/></li> 124 </ul> 125 </li> 126 127 <li class = "liB"> 128 <ul> 129 <li class="lis"><img src="../ygcard/images/img1.png"/></li> 130 <li class="lis"><img src="../ygcard/images/img1.png"/></li> 131 <li class="lis"><img src="../ygcard/images/img1.png"/></li> 132 <li class="lis"><img src="../ygcard/images/img1.png"/></li> 133 </ul> 134 </li> 135 </ul> 136 137 <div class="play"> 138 <div class="toubi">请按投币:</div> 139 <div class="icon"><img src="../ygcard/images/jinbi.png"/></div> 140 <div class="win">200</div> 141 </div> 142 143 <div id="showMsg"> 144 <img src="../ygcard/images/win.png"> 145 </div> 146 147 <div id="mask"> 148 <img src="../ygcard/images/sha.png"> 149 </div> 150 </div> 151 152 </body> 153 </html> 154 155 <script type="text/javascript"> 156 157 $(function(){ 158 159 var liAEnd = $(".liA ul li:last"); 160 var liBEnd = $(".liB ul li:last"); 161 162 liAEnd.css({ 163 ‘margin-right‘: 0, 164 ‘float‘: ‘right‘, 165 }); 166 167 liBEnd.css({ 168 ‘margin-right‘: 0, 169 ‘float‘: ‘right‘, 170 }); 171 172 function getRandom(n){ 173 return Math.floor(Math.random()*n+1); 174 } 175 176 var imgSrc = $("img"); 177 var lis = $(".lis"); 178 179 var num = 0; 180 var count = 0; 181 var win = 200; 182 183 var winTxt = $(".win"); 184 var icon = $("#showMsg"); 185 var iconImg = $("#showMsg img"); 186 var mask = $("#mask"); 187 var maskImg = $("#mask img"); 188 189 190 $(".icon").click(function(event) { 191 for (var i = 0; i<lis.length; i++) { 192 num = getRandom(4) 193 imgSrc.eq(i).prop(‘src‘, ‘../ygcard/images/img‘+num+‘.png‘); 194 195 if(num>2){ 196 count++; 197 } 198 } 199 200 if(count > 4){ 201 win += 10; 202 iconImg.prop(‘src‘, ‘../ygcard/images/win.png‘); 203 204 mask.css({ 205 ‘visibility‘:‘visible‘, 206 }); 207 winGame(); 208 }else if(count == 4){ 209 iconImg.prop(‘src‘, ‘../ygcard/images/he.png‘); 210 211 mask.css({ 212 ‘visibility‘:‘visible‘, 213 }); 214 winGame(); 215 216 }else{ 217 218 if(win < 50){ 219 win = 0; 220 221 iconImg.prop(‘src‘, ‘../ygcard/images/over.png‘); 222 223 mask.css({ 224 ‘visibility‘:‘visible‘, 225 }); 226 227 maskImg.css({ 228 ‘visibility‘: ‘visible‘, 229 }); 230 231 maskImg.animate( 232 { 233 ‘opacity‘: ‘0‘, 234 }, 235 10); 236 237 maskImg.animate( 238 { 239 ‘opacity‘: ‘1‘, 240 }, 241 10); 242 243 maskImg.animate( 244 { 245 ‘opacity‘: ‘0‘, 246 }, 247 10); 248 249 maskImg.animate( 250 { 251 ‘opacity‘: ‘1‘, 252 }, 253 200); 254 255 maskImg.animate( 256 { 257 ‘opacity‘: ‘0‘, 258 }, 259 10, winGame); 260 261 return; 262 263 }else{ 264 win -= 50; 265 266 iconImg.prop(‘src‘, ‘../ygcard/images/over.png‘); 267 268 mask.css({ 269 ‘visibility‘:‘visible‘, 270 }); 271 272 maskImg.css({ 273 ‘visibility‘: ‘visible‘, 274 }); 275 276 maskImg.animate( 277 { 278 ‘opacity‘: ‘0‘, 279 }, 280 10); 281 282 maskImg.animate( 283 { 284 ‘opacity‘: ‘1‘, 285 }, 286 10); 287 288 maskImg.animate( 289 { 290 ‘opacity‘: ‘0‘, 291 }, 292 10); 293 294 maskImg.animate( 295 { 296 ‘opacity‘: ‘1‘, 297 }, 298 200); 299 300 maskImg.animate( 301 { 302 ‘opacity‘: ‘0‘, 303 }, 304 10, winGame); 305 } 306 307 } 308 309 }); 310 311 function winGame(){ 312 icon.css({ 313 ‘visibility‘: ‘visible‘, 314 }); 315 316 icon.animate({ 317 ‘opacity‘: ‘0‘, 318 },10); 319 320 icon.animate({ 321 ‘opacity‘: ‘1‘, 322 ‘top‘:‘300px‘, 323 },200); 324 325 icon.animate({ 326 ‘opacity‘: ‘1‘, 327 },1000); 328 329 icon.animate({ 330 ‘opacity‘: ‘0‘, 331 ‘top‘:‘0px‘, 332 },200,showGame); 333 } 334 335 function showGame(){ 336 winTxt.html(win); 337 338 mask.css({ 339 ‘visibility‘:‘hidden‘, 340 }) 341 342 maskImg.css({ 343 ‘visibility‘: ‘hidden‘, 344 }); 345 346 if(win >= 1000){ 347 alert("WIN!!!"); 348 win = 200; 349 winTxt.html(win); 350 }else if(win <= 0){ 351 alert("GAME OVER!!!"); 352 win = 200; 353 winTxt.html(win); 354 } 355 356 count = 0; 357 } 358 }); 359 360 </script>
标签：
原文地址：http://www.cnblogs.com/yuge790615/p/4805827.html
