jquery实现九宫格转盘抽奖效果代码
代码语言:html
所属分类:大转盘
代码描述:jquery实现九宫格转盘抽奖效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.css"> <style> *{margin: 0;padding: 0;box-sizing: border-box;} html { min-height: 100%; scroll-behavior:smooth; } body{ min-height: 100%; background: #FFFFFF; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; } a,a:hover,a:active,a:visited,a:link,a:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; outline:none; background: none; text-decoration: none; color: #232323; } input[disabled]{color:#333333;opacity:1} h1, h2, h3, h4, h5, h6{font-weight:normal;} ul,li{ list-style: none; } i{ font-style: normal; } body { line-height: 0.4rem; font-size:0.28rem; color:#333; } img { border: none; vertical-align: top; } table { border-collapse: collapse; table-layout: fixed; } input, textarea { outline: none; border: none; } textarea { resize: none; overflow: auto; } .clearfix { zoom: 1; } .clearfix:after { content: "."; width: 0; height: 0; visibility: hidden; display: block; clear: both; overflow:hidden; } .fl { float: left } .fr { float: right } .tl { text-align: left; } .tc { text-align: center } .tr { text-align: right; } .ellipse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inline{ display: inline-block; *display: inline; *zoom: 1; } .load_bg,.load_load{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #fff; z-index: 60; } .httips{ position: fixed; top: 4rem; left: 0; display: inline-block; width: 100%; z-index: 80; text-align: center; } .httips span{ display: inline-block; line-height: 30px; background: #000; font-size: 0.24rem; color: #fff; border-radius: 0.1rem; padding: 0 0.2rem; } .httipsbg,.httipsbgajax{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); z-index: 79; } .httipsbgajax{ z-index: 99; } .img_wid{ display: block; width: 100%; } .img_none{ pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .main_box{ padding: 0.4rem 0.4rem 0; } .lottery_box{ position: relative; } .lottery_box .list_box{ position: absolute; left: 50%; top: 50%; width: 5.6rem; height: 5.6rem; margin-left: -2.8rem; margin-top: -2.8rem; } .lottery_box .list{ position: absolute; width: 1.8rem; height: 1.8rem; padding: 0.1rem; background: #fffdfd; border-radius: 0.1rem; } .lottery_box .list:nth-child(1){ left: 0; top: 0; } .lottery_box .list:nth-child(2){ left: 1.9rem; top: 0; } .lottery_box .list:nth-child(3){ right: 0; top: 0; } .lottery_box .list:nth-child(4){ right: 0; top: 1.9rem; } .lottery_box .list:nth-child(5){ right: 0; bottom: 0; } .lottery_box .list:nth-child(6){ left: 1.9rem; bottom: 0; } .lottery_box .list:nth-child(7){ left: 0; bottom: 0; } .lottery_box .list:nth-child(8){ left: 0; top: 1.9rem; } .lottery_box .list_box::before{ content: ''; display: none; position: absolute; width: 1.8rem; height: 1.8rem; border-radius: 0.12rem; background: rgba(0,0,0,0.3); z-index: 10; } .lottery_box .list_box0::before{ display: block; left: 0; top: 0; } .lottery_box .list_box1::before{ display: block; left: 1.9rem; top: 0; } .lottery_box .list_box2::before{ display: block; right: 0; top: 0; } .lottery_box .list_box3::before{ display: block; right: 0; top: 1.9rem; } .lottery_box .list_box4::before{ display: block; right: 0; bottom: 0; } .lottery_box .list_box5::before{ display: block; left: 1.9rem; bottom: 0; } .lottery_box .list_box6::before{ display: block; left: 0; bottom: 0; } .lottery_box .list_box7::before{ display: block; left: 0; top: 1.9rem; } .lottery_box .list_but{ position: absolute; left: 1.9rem; top: 1.9rem; width: 1.8rem; height: 1.8rem; padding: 0.04rem; } .lottery_box .list_ev{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px dashed #d09d8e; border-radius: 0.1rem; text-align: center; } .lottery_box .list_ev img{ display: inline-block; width: 0.7rem; height: 0.62rem; } .lottery_box .list_ev .name{ padding-top: 0.1rem; line-height: 0.32rem; font-size: 0.24rem; color: #e74435; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <script > (function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { if (document.addEventListener) { document.addEventListener("WeixinJSBridgeReady", handleFontSize, false); } else if (document.attachEvent) { document.attachEvent("WeixinJSBridgeReady", handleFontSize); document.attachEvent("onWeixinJSBridgeReady", handleFontSize); } } function handleFontSize() { WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 }); WeixinJSBridge.on('menu:setfont', function() { WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 }); }); } })(); var docSize; (function(doc, win) { var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1, dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放 dpr = 1, scale = 1 / dpr, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; docEl.dataset.dpr = dpr; var metaEl = doc.createElement('meta'); metaEl.name = 'viewport'; metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale; docEl.firstElementChild.appendChild(metaEl); var recalc = function() { var width = docEl.clientWidth; if (width / dpr > 750) { width = 750 * dpr; } // 乘以100,px : rem = 100 : 1 docEl.style.fontSize = 100 * (width / 750) + 'px'; docSize = 100 * (width / 750); }; recalc() if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); })(document, window); function httipsFun(tex,type){ if($('.httips').length>0){ return false } $('body').append('<di.........完整代码请登录后点击上方下载按钮下载查看
网友评论0