您的位置：首页 > 其它

web设计——card

2015-09-13 22:54 429 查看


案例地址：http://wanwanweb.sinaapp.com/ygcard/

源码在下方仅供参考，自己动手设计一款类似的版式，然后亲自动手试一下。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ygcard</title>
<script type="text/javascript" src="../ygnba/js/jquery.js"></script>
<style type="text/css">

*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}

body{
background-color: #000;
}

#main{
width: 1280px;
height: 744px;
margin: 0 auto;
background: url("../ygcard/images/bj.jpg");
padding-top:10px;
position: relative;
}

.gameTable{
width: 880px;
height: 685px;
margin: 0px auto;
}

.liA ul li{
float: left;
margin-right: 45px;
}

.liA ul li.end{
margin-right: 0px;
float: right;
}

.liB ul li{
float: left;
margin-right: 45px;
margin-top: 5px;
}

.end{
margin-right: 0px;
float: right;
}

.play{
margin: 0 auto;
width: 200px;
height: 50px;
line-height: 50px;
font-size: 24px;
font-family:"微软雅黑";
color:#fff;
}

.play .toubi{
float:left;
line-height: 50px;
font-size: 18px;
font-family:"微软雅黑";
}

.play .icon{
float: left;
cursor: pointer;
}

.play .win{
float:left;
color:#fff;
line-height: 50px;
font-size: 24px;
font-family:"微软雅黑";
}

.play .footer{
clear: both;
}

#showMsg{
position: absolute;
left:600px;
top:0px;
visibility:hidden;
}

#mask{
position: absolute;
left: 0;
top: 0;
width: 1280px;
height: 700px;
z-index: 100;
visibility: hidden;
text-align: center;
padding-top: 100px;
}

#mask img{
visibility: hidden;
}

</style>
<body>
<div id="main">
<ul class = "gameTable">
<li class = "liA">
<ul>
<li class="lis"><img src="../ygcard/images/img1.png"/></li>
<li class="lis"><img src="../ygcard/images/img1.png"/></li>
<li class="lis"><img src="../ygcard/images/img1.png"/></li>
<li class="lis"><img src="../ygcard/images/img1.png"/></li>
</ul>
</li>

<li class = "liB">
<ul>
<li class="lis"><img src="../ygcard/images/img1.png"/></li>
<li class="lis"><img src="../ygcard/images/img1.png"/></li>
<li class="lis"><img src="../ygcard/images/img1.png"/></li>
<li class="lis"><img src="../ygcard/images/img1.png"/></li>
</ul>
</li>
</ul>

<div class="play">
<div class="toubi">请按投币:</div>
<div class="icon"><img src="../ygcard/images/jinbi.png"/></div>
<div class="win">200</div>
</div>

<div id="showMsg">
<img src="../ygcard/images/win.png">
</div>

<div id="mask">
<img src="../ygcard/images/sha.png">
</div>
</div>

</body>
</html>

<script type="text/javascript">

$(function(){

var liAEnd = $(".liA ul li:last");
var liBEnd = $(".liB ul li:last");

liAEnd.css({
'margin-right': 0,
'float': 'right',
});

liBEnd.css({
'margin-right': 0,
'float': 'right',
});

function getRandom(n){
return Math.floor(Math.random()*n+1);
}

var imgSrc = $("img");
var lis = $(".lis");

var num = 0;
var count = 0;
var win = 200;

var winTxt = $(".win");
var icon = $("#showMsg");
var iconImg = $("#showMsg img");
var mask = $("#mask");
var maskImg = $("#mask img");

$(".icon").click(function(event) {
for (var i = 0; i<lis.length; i++) {
num = getRandom(4)
imgSrc.eq(i).prop('src', '../ygcard/images/img'+num+'.png');

if(num>2){
count++;
}
}

if(count > 4){
win += 10;
iconImg.prop('src', '../ygcard/images/win.png');

mask.css({
'visibility':'visible',
});
winGame();
}else if(count == 4){
iconImg.prop('src', '../ygcard/images/he.png');

mask.css({
'visibility':'visible',
});
winGame();

}else{

if(win < 50){
win = 0;

iconImg.prop('src', '../ygcard/images/over.png');

mask.css({
'visibility':'visible',
});

maskImg.css({
'visibility': 'visible',
});

maskImg.animate(
{
'opacity': '0',
},
10);

maskImg.animate(
{
'opacity': '1',
},
10);

maskImg.animate(
{
'opacity': '0',
},
10);

maskImg.animate(
{
'opacity': '1',
},
200);

maskImg.animate(
{
'opacity': '0',
},
10, winGame);

return;

}else{
win -= 50;

iconImg.prop('src', '../ygcard/images/over.png');

mask.css({
'visibility':'visible',
});

maskImg.css({
'visibility': 'visible',
});

maskImg.animate(
{
'opacity': '0',
},
10);

maskImg.animate(
{
'opacity': '1',
},
10);

maskImg.animate(
{
'opacity': '0',
},
10);

maskImg.animate(
{
'opacity': '1',
},
200);

maskImg.animate(
{
'opacity': '0',
},
10, winGame);
}

}

});

function winGame(){
icon.css({
'visibility': 'visible',
});

icon.animate({
'opacity': '0',
},10);

icon.animate({
'opacity': '1',
'top':'300px',
},200);

icon.animate({
'opacity': '1',
},1000);

icon.animate({
'opacity': '0',
'top':'0px',
},200,showGame);
}

function showGame(){
winTxt.html(win);

mask.css({
'visibility':'hidden',
})

maskImg.css({
'visibility': 'hidden',
});

if(win >= 1000){
alert("WIN!!!");
win = 200;
winTxt.html(win);
}else if(win <= 0){
alert("GAME OVER!!!");
win = 200;
winTxt.html(win);
}

count = 0;
}
});

</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航