案例地址：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>
时间： 2024-10-12 20:43:11