jquery实现一个扭蛋机抽奖效果代码-html代码-BFW代码库

代码语言：html

所属分类：电商

代码描述：jquery实现一个扭蛋机抽奖效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="pragram" content="no-cache" />

<style>
    *{padding:0px;margin:0px;font-family:"微软雅黑";font-size:100%; font-style:normal}
dd,dl,dt,em,i,p,textarea,a,div{padding:0px;margin:0px;}
a{text-decoration:none;}
img{border:0px;}
ul,li{padding:0px;margin:0px;list-style:none;}
.fl{ float:left}
.fr{ float:right}
body{margin:0px; padding:0px; color:#ffc476; background:#fff; color:#000000}
a{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.none{ display:none}


/*扭蛋机*/
.niu_danji{ width:640px; height:1039px; background:#1b1009; margin:0px auto; overflow:hidden; position:relative}

.niu_danji .game_qu{ background:url(//repo.bfw.wiki/bfwrepo/images/huodong/game_ndj.png) no-repeat; width:553px; height:767px;  left:47px; top:74px; position:absolute; z-index:3}
.niu_danji .game_go{ width:134px; height:50px; position:absolute; left:210px; bottom:225px;background:url(//repo.bfw.wiki/bfwrepo/images/huodong/an_go.png) no-repeat; font-size:18px; color:#fff; line-height:20px; text-align:center; padding-top:90px; }

.niu_danji .wdjifen{ font-size:20px; color:#e00b37;width:128px; height:35px;  line-height:35px;position:absolute; left:206px;  bottom:120px; text-align:center}


.niu_danji .an_jfgr{ width:100%; text-align:center; padding-top:23px; position:absolute; left:0px; bottom:60px;}
.niu_danji .an_jfgr img{ margin:0px 7px;}



.niu_danji .dan_gund{ width:500px; height:447px; position:absolute; left:68px; top:80px;  z-index:1;
-webkit-border-radius:240px 240px 0px 0px;
    -moz-border-radius:240px 240px 0px 0px;
    border-radius:240px 240px 0px 0px; overflow:hidden}

.niu_danji .dan_gund span{ width:115px; height:115px;}


/*中奖*/
.zonj_zezc{ width:640px; min-height:1039px; position:absolute; left:50%; top:0px; z-index:4;background:rgba(0,0,0,0.85); margin-left:-320px;}
.zonj_zezc .jpzs{ width:450px; height:286px;   position:relative；-webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px; background:#fff; margin:300px auto 0px auto; position:relative}
.zonj_zezc .jpzs em{ height:95px; position:absolute; right:0px; top:-50px;}


.zonj_zezc .jpzs h2{ font-size:36px; color:#ff1a4b; text-align:center; line-height40px; display:flex; justify-content:center; align-items:center; height:286px; }


.qiu_1{ position:absolute; left:55px; top:272px;}
.qiu_1:after{content:""; position:absolute; left:0; top:0; width:115px; height:115px; display:block;background:url(//repo.bfw.wiki/bfwrepo/images/huodong/canpin_4.png) no-repeat;animation:zhuan 1s linear forwards;-webkit-animation:zhuan 1s linear forwards ;}
.qiu_2{ position:absolute; left:3px; top:200px}
.qiu_2:after{content:""; position:absolute; left:0; top:0; width:115px; height:115px; display:block;background:url(//repo.bfw.wiki/bfwrepo/images/huodong/canpin_3.png) no-repeat;animation:zhuan 1s linear forwards ;-webkit-animation:zhuan 1s linear forwards ;}
.qiu_3{ position:absolute; left:10px; top:348px;}
.qiu_3:after{content:""; position:absolute; left:0; top:0; width:115px; height:115px; display:block;background:url(//repo.bfw.wiki/bfwrepo/images/huodong/canpin_1.png) no-repeat;animation:zhuan 1s linear forwards ;-webkit-animation:zhuan 1s linear forwards ;}

.qiu_4{ position:absolute; left:130px; top:227px;}
.qiu_4:after{content:""; position:absolute; left:0; top:0; width:115px; height:115px; display:block;background:url(//repo.bfw.wiki/bfwrepo/images/huodong/canpin_2.png) no-repeat;animation:zhuan 1s linear forwards ;-webkit-animation:zhuan 1s linear forwards ;}
.qiu_5{ position:absolute; left:174px; top:305px; }
.qiu_5:after{content:""; position:absolute; left:0; top:0; width:115px; height:115px; display:block;background:url(//repo.bfw.wiki/bfwrepo/images/huodong/canpin_4.png) no-repeat;animation:zhuan 1s linear forwards ;-webkit-animation:zhuan 1s linear forwards ;}
.qiu_6{ position:absolute; left:100px; top:348px;}
.qiu_6:after{content:""; position:a.........完整代码请登录后点击上方下载按钮下载查看