js实现一个大屏随机抽奖效果代码
代码语言:html
所属分类:其他
代码描述:js实现一个大屏随机抽奖效果代码,可以内定中奖人
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { padding: 0; margin: 0; font-family: 14px; font-family: "微软雅黑"; } .ce-pack-end { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; position: absolute; top: 0; left: 0; } .luck-back { background-size: cover; background-position: top center; position: absolute; height: 100%; width: 100%; color: #fff; background-color: #E76345; } .luck-content { position: absolute; top: 20%; bottom: 20%; left: 20%; right: 20%; background: rgba(0,0,0,.6); padding: 20px; border-radius: 5px; padding-right: 260px; } .luck-user { position: absolute; right: 20px; top: 20px; bottom: 20px; width: 240px; background-color: rgba(255,255,255,.2); border-radius: 5px; } .luck-user-list { list-style-type: none; padding: 0 20px; margin: 0; overflow-y: scroll; position: absolute; top: 50px; bottom: 70px; width: 100%; } .luck-user-list>li { margin-top: 10px; position: relative; } .luck-user-list>li div.portrait { height: 30px; width: 30px; border-radius: 5px; background-position: center; background-size: cover; } .luckuserName { line-height: 30px; position: absolute; top: 0; left: 40px; right: 0; } .luck-user-title { position: absolute; width: 90%; display: block; text-align: center; line-height: 40px; left: 5%; color: #f5b43a; font-weight: bold; } .luck-user-title::before { position: absolute; content: ""; top: 100%; left: 0; width: 100%; background: -webkit-linear-gradient(left, rgba(248,215,59,0), #f0d03a, rgba(248,215,59,0)); height: 1px; } .luck-user-btn { position: absolute; bottom: 20px; left: 5%; width: 90%; text-align: center; line-height: 40px; cursor: pointer; } .luck-user-btn>a { background: #f29807; width: 100%; line-height: 40px; display: block; border-radius: 5px; text-decoration: none; color: #fff; } .luck-user-btn>a:hover { background: #fcb842; } .luck-title { text-align: center; margin-bottom: 20px; } .luck-content-btn { width: 100%; text-align: center; line-height: 40px; padding-top: 20px; overflow: hidden; } .luck-content-btn a { background: #f29807; width: 150px; text-decoration: none; display: inline-block; color: #fff; text-align: center; margin: 0 10px; cursor: pointer; } .luck-content-btn a:hover { background: #fcb842; } .luck-title { font-size: 20px; } .slotMachine { width: 200px; height: 200px; display: block; text-align: center; background-color: #ffffff; border-radius: 5px; margin: 0 auto; border: #f5ad18 4px solid; position: relative; } .slotMachine .slot { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; } .slotMachine .slot>span { position: absolute; bottom: 0; left: 0; line-height: 50px; text-decoration: center; background-color: rgba(0,0,0,.5); width: 100%; } ::-webkit-scrollbar { width: 10px; height: 16px; border-radius: 6px; } ::-webkit-scrollbar-track { border-radius:6px; background-color: rgba(255,255,255,.2); } ::-webkit-scrollbar-thumb { border-radius: 6px; background-color: #fff; } .luck-img { width: 100%; padding-top: 100%; background-position: center; background-size: cover; } </style> </head> <body> <div class='luck-back'> <div class="luck-content ce-pack-end"> <div id="luckuser" class="slotMachine"> <div class="slot"> <span class="name">姓名</span> </div> </div> <div class="luck-content-btn"> <a id="start" class="start" onclick="start()">开始</a> </div> <div class="luck-user"> <div class="luck-user-title"> <span>中奖名单</span> </div> <ul class="luck-user-list"></ul> <div class="luck-user-btn"> <a href="#">中奖人</a> </div> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <script> var xinm = new Array(); xinm[0] = "//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" xinm[1] = "//repo.bfw.wiki/bfwrepo/image/5fc1b6b06272d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" xinm[2] = "//repo.bfw.wiki/bfwrepo/i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0