Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	list-style:none;
	text-decoration:none;
}
html,body {
	width:100%;
	height:100%;
	overflow:hidden;
}
.box {
	width:100%;
	height:100%;
	background:url(images/zwwbj.jpg) no-repeat center;
	background-size:cover;
}
.paw {
	width:100%;
	height:20px;
	background:#8d3835;
	position:relative;
	box-shadow:2px 2px 5px rgba(0,0,0,0.3)
}
.pawer {
	width:10px;
	background:#565656;
	height:20px;
	position:absolute;
	top:20px;
	left:50%;
	margin-left:-5px;
	box-shadow:2px 2px 5px rgba(0,0,0,0.3)
}
.pawerPic {
	width:110px;
	height:85px;
	position:absolute;
	top:40px;
	left:50%;
	margin-left:-55px;
}
.lose {
	width:100px;
	height:85px;
	display:block;
	margin:0 auto;
}
.pawerPic.on .lose {
	display:none;
}
.pawerPic.on .win {
	display:block;
}
.win {
	width:110px;
	height:105px;
	display:none;
	margin:0 auto;
	background:url(images/jiazi2.png);
	background-size:cover;
	overflow:hidden;
}
.win img {
	display:block;
	margin:0 auto;
	margin-top:12px;
}
.btn {
	width:120px;
	height:120px;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-60px;
}
.btn2 {
	width:120px;
	height:120px;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-60px;
	background:url(images/kaishi2.png) no-repeat center;
	background-size:contain;
	display:none;
}
.btn.on .btn_star {
	display:none;
}
.btn_star {
	background:url(images/kaishi.png) no-repeat center;
	background-size:contain;
	width:120px;
	height:120px;
}
.btn_end {
	background:url(images/kaishi2.png) no-repeat center;
	background-size:contain;
	width:120px;
	height:120px;
}
.area {
	width:100%;
	height:auto;
	overflow:hidden;
	position:absolute;
	top:40px;
	left:0;
}
/*娃娃滚动*/
#pack {
	width:100%;
	height:90px;
	white-space:nowrap;
	overflow:hidden;
	position:absolute;
	bottom:0;
	left:0;
}
#sel1,#sel2 {
	display:inline;
}
#pack img {
	display:inline-block;
	height:90px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.10.2
 立即下载

手机端抓娃娃游戏

注:需要在移动端查看效果,pc端点击无效

0