jquery实现手机端移动端九宫格抽奖页面代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现手机端移动端九宫格抽奖页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta http-equiv="Expires" content="-1"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Pragma" content="no-cache"> <style> @charset "utf-8"; html { font-size: 50px; height: 100%; } body { position: relative; max-width: 100%; min-width: 320px; width: 100%; margin: 0 auto; padding: 0px; font-family: "microsoft yahei"; font-size: 100%; background:#6dcaf2; overflow-x: hidden; background-size: 100% 100%; } div, h1, h2, h3, h4, h5, h6, img, ul, li, dl, dd, strong, span, a, input, button, select, form, textarea, td { padding: 0; margin: 0; } img { border: none; display: block; width: 100%; } ul, dl { list-style-type: none; margin: 0px; padding: 0px; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } a { color: #666; text-decoration: none; } a:link { color: #666; } a:visited { color: #666; } a:hover { color: #666; text-decoration: none; } a:active { color: #666; } a:active { outline: none } ::-webkit-input-placeholder { color: #999999; } input, button, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; vertical-align: middle; outline: none; } * { margin: 0; padding: 0; } a { -webkit-appearance: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; outline: none; } * { -webkit-appearance: none; -webkit-tap-highlight-color: transparent; outline: none; } textarea { -webkit-appearance: none; -moz-appearance: none; } select { border: solid 1px #fff; appearance: none; -moz-appearance: none; -webkit-appearance: none; padding-right: 1px; } select::-ms-expand { display: none; } input[type="button"], input[type="submit"], input[type="text"], input[type="password"], input[type="reset"], select, input[type="radio"], input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; -webkit-tap-highlight-color: transparent; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } a:active, input:focus, img:focus { -webkit-tap-highlight-color: transparent; } input[type="number"] { -moz-appearance: textfield; } @media only screen and (min-width: 360px) { html { font-size: 56.25px; } } @media only screen and (min-width: 375px) { html { font-size: 58.5938px; } } @media only screen and (min-width: 384px) { html { font-size: 60px; } } @media only screen and (min-width: 400px) { html { font-size: 62.5px; } } @media only screen and (min-width: 414px) { html { font-size: 64.6875px; } } @media only screen and (min-width: 424px) { html { font-size: 66.25px; } } @media only screen and (min-width: 480px) { html { font-size: 75px; } } @media only screen and (min-width: 540px) { html { font-size: 84.375px; } } @media only screen and (min-width: 640px) { html { font-size: 100px; } } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; } *{ -webkit-overflow-scrolling: touch; } * { touch-action: pan-y; } .banner { position: relative; width: 100%; height: 5.3rem; box-sizing: border-box; margin: -1.4rem auto 0.2rem; } .banner-container { width: 78%; height: 100%; margin: 0 auto; padding: 0 0.2rem; box-sizing: border-box; } .swiper-slide { position: relative; text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; box-sizing: border-box; border: 0.03rem solid #efefef; border-radius:0.08rem; } .swiper-pagination-bullet { opacity: 0.9; background: #f5f5f5; } .swiper-pagination-bullet-active { opacity: 1; background: #fff; } .banner-container img { width: 100%; height: 100%; box-sizing: border-box; border-radius:0.08rem; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhuanpan/icon-prev.png); background-repeat: no-repeat; background-size: 0.5rem 0.5rem; left: 0.1rem; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhuanpan/icon-next.png); background-repeat: no-repeat; background-size: 0.5rem 0.5rem; right: 0.1rem; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 0.5rem; height: 0.5rem; z-index: 10; background-color:rgba(25,34,76,0.4); border-radius: 100%; display: block; } .swiper-cover{ position: absolute; left: 0; top: 0; display: inline-flex; align-content: center; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 0.22rem; color: #bbb; background: rgba(0,0,0,0.6); } .all { position: relative; width: 100%; overflow: hidden; font-size: 0.24rem; } .lottery { width: 100%; padding: 0.2rem; box-sizing: border-box; font-size: 0.24rem; } .lottery_times { padding: 0.2rem 0.2rem 0; text-align: center; color: #074f82; } .lottery_times .num { display: inline-block; margin: 0 0.05rem; font-weight: bold; } .shanDeng { width: 100%; margin: 0 auto; background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhuanpan/zward_new_2.png) no-repeat; background-size: 100% 100%; padding: 1.25em; box-sizing: border-box; } .shanDeng #luck { width: 100%; overflow: hidden; } .shanDeng table { width: 100%; box-sizing: border-box; } .shanDeng table td { width: 33.33%; height: 0.6rem; padding: 0.12rem 0; box-sizing: border-box; font-size: 0.16rem; text-align: center; background-image: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhuanpan/zward_init.png); background-size: 100% 100%; } .shanDeng img { width: auto; height: 1rem; margin: 0.08rem auto; } #btn.cjBtn { background-image: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhuanpan/zWARDSbtn.png); background-size: 100% 100%; } #btn.cjBtnDom { background-image: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhuanpan/buttonDown.png); } #luck .active { background-image: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhuanpan/active.png); } .shanDeng table { margin: 0 auto; } .my_gift { padding: 0.2rem; } .my_gift .title_block { position: relative; width: 100%; height: 0.4rem; margin: 0.3rem auto 0; text-align: center; font-weight: bold; color: #fff; } .my_gift .title { position: absolute; top: -0.2rem; left: 0%; width: 100%; background: #6dcaf2; } .my_gift .title:before { position: absolute; left: 0; top: -0.15rem; display: block; content: ""; width: 140px; height: 40px; background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhuanpan/title-before.png) no-repeat; background-size: cover; } .my_gift .title:after { position: absolute; right: 0; top: -0.15rem; display: block; content: ""; width: 140px; height: 40px; background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhuanpan/title-after.png) no-repeat; background-size: cover; } .my_gift table { width: 100%; padding: 0.15rem 0; background: #fff; border-radius: 0.1rem; } .my_gift table th { font-weight: normal; color: #bbb; } .my_gift table th, .my_gift table td { padding: 0.15rem 0.15rem; text-align: center; font-size: 0.22rem; } .my_gift table th:nth-child(3n+3), .my_gift table td:nth-child(3n+3) { text-align: right; } .my_gift table a { display: inline-block; width: 60%; box-sizing: border-box; text-align: center; color: #d8271c; background: transparent; border-radius: 0.1rem; } .winner_list table td { width: 33.33%; box-sizing: border-box; text-align: center; color: #bbb; } .draw-container { position: relative; width: 100%; height: 0.7rem; overflow: hidden; margin: 0.1rem 0 0.2rem; background: #fff; border-radius: 0.1rem; } .draw-container .swiper-slide { border: none; } .adv_list { width: 100%; overflow: hidden; } .adv_list li { display: inline-block; opacity: 1 !important; text-align: left; margin: 0 0.15rem; } .adv_list a { display: block; font-size: 0.22rem; color: #6c6b6b; } .cover { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .cover_box, .result_box { z-index: 1002; position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-content: center; align-items: center; justify-content: center; } .cover_box .close, .result_box .close { position: absolute; top: calc(80%); left: 50%; width: 0.5rem; margin-left: -0.25rem; } .card_box { position: absolute; z-index: 1003; top: 50%; transform: translateY(-55%); width: 86%; left: 7%; padding-bottom: 0.2rem; box-sizing: border-box; font-size: 0.24rem; background: #fff; border-radius: 0.1rem; } .card_box .card_top { padding: 0.4rem 0.4rem; text-align: center; background: -webkit-linear-gradient(#7bd3fa, #67c4ed); border-top-left-radius: 0.1rem; border-top-right-radius: 0.1rem; } .card_box .title { font-size: 0.26rem; color: #fff; } .card_box .title img { display: inline-block; vertical-align: middle; width: 0.4rem; } .card_box .title span { display: inline-block; vertical-align: middle; } .card_box .card_tips { padding: 0.2rem 0; font-size: 0.22rem; color: #fff; } .card_box .card_form { width: 90%; margin: 0.2rem auto; } .card_box .card_form li { position: relative; width: 100%; margin-bottom: 0.2rem; padding: 0.2rem; box-sizing: border-box; background: transparent; border-bottom: 1px solid #ddd; } .card_box .card_form input { border: none; width: 100%; background: transparent; border-radius: 0; } .card_box .card_form .send_code { position: absolute; right: 0.2rem; top: 0.2rem; color: #19ABDC; } .card_box .card_form .pic_code { position: absolute; right: 0.2rem; top: 0rem; width: 1.2rem; height: 0.7rem; } .card_box .btn_default { border: none; display: block; width: 90%; margin: 0.2rem auto; padding: 0.2rem 0; font-weight: bold; color: #fff; background: #5bbbe5; border: 1px solid #19ABDC; border-radius: 0.5rem; } .card_box .tips { padding: 0.1rem 0; text-align: center; font-size: 0.22rem; color: red; } .result_box .card_top { padding: 0.4rem 0.4rem; text-align: center; background: -webkit-linear-gradient(#7bd3fa, #67c4ed); border-top-left-radius: 0.1rem; border-top-right-radius: 0.1rem; } .result_box .title { font-size: 0.26rem; color: #fff; } .result_box .title img { display: inline-block; vertical-align: middle; width: 0.4rem; } .result_box .title span { display: inline-block; vertical-align: middle; } .result_box .card_tips { padding: 0.4rem 0.4rem 0.3rem; text-align: center; font-size: 0.22rem; color: #999; } .result_box .btn_default { border: none; display: block; width: 90%; margin: 0.2rem auto; padding: 0.2rem 0; font-weight: bold; color: #19ABDC; background: #fff; border: 1px solid #19ABDC; border-radius: 0.5rem; } .dis_no { display: none; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.4.5.1.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/swiper.4.5.1.js"></script> <title></title> </head> <body> <div class="all&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0