jquery实现一个老虎机抽奖效果代码
代码语言:html
所属分类:游戏
代码描述:jquery实现一个老虎机抽奖效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> * { padding: 0; margin: 0 } body{ padding: 200px; } .tigerBg { width: 640px; height: 100%; min-height: 860px; max-height: 1136px; background: url("//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/lottery_draw.png"); position: absolute; } .play { width: 516px; height: 126px; background: url("//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/play.png"); position: absolute; top: 615px; left: 70px; border: none; } :focus{ outline: 0; } .num_box { height: 410px; width: 460px; overflow: hidden; text-align: center; position: absolute; top: 210px; left: 90px; } .tiger { background: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/tiger.png); width: 150px; height: 410px; float: left; } .num_box .tiger:nth-child(1) { margin-left: 0px; } .num_box .tiger:nth-child(2) { margin-left: 5px; background: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/tiger1.png) } .num_box .tiger:nth-child(3) { margin-left: 5px; background: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/tiger2.png) } .tigerTxt { background: #DE141D; width: 475px; height: 80px; position: absolute; left: 85px; top: 165px; z-index: 10; text-align: center; line-height: 80px; color: #ffffff; font-size: 29px; font-weight: 900; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.easing.1.3.min.js"></script> </head> <body> <div class="tigerBg"> <div class="tigerTxt">您有<span>*</span>次抽奖机会.........完整代码请登录后点击上方下载按钮下载查看
网友评论0