jquery实现手机端移动端砸金蛋活动页面代码-html代码-BFW代码库

代码语言：html
代码描述：jquery实现手机端移动端砸金蛋活动页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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">
    <style>
@charset "utf-8";
        body {
            width: 100%;
            height: 100%;
            margin: 0px auto;
            font: 12px/1.5 "Microsoft YaHei", Helvitica, Verdana, Arial, san-serif;
            color: #333333;
            background: #f4f0ca;
        }
        a {
            color: #333333;
            text-decoration: none;
        }
        a:hover {
            color: #e8383d;
            text-decoration: underline;
        }
        h1,h2,h3 {
            margin: 0px;
        }
        img,ul,li,p {
            margin: 0px;
            list-style: none;
            padding: 0px;
        }

        .Title {
            width: 100%;
            height: 48px;
            font: 18px/48px "Microsoft YaHei";
            color: #fff;
            background: #d03237;
            text-align: center;
            position: relative;
        }
        .Title .back {
            width: 48px;
            height: 48px;
            text-indent: -9999px;
            background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/NavIco.png) no-repeat left top;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        #main {
            width: 100%;
            height: 302px;
            background: #e8383d;
            position: relative;
        }
        #main .bg {
            width: 100%;
            height: 58px;
            background: #f4f0ca;
            position: absolute;
            z-index: 1;
            bottom: 0px;
        }

        .egg {
            width: 310px;
            height: auto;
            margin: 0px auto;
            padding-top: 50px;
            z-index: 2;
            position: relative;
            background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/MainBg.jpg) top center no-repeat;
            background-size: 340px 302px;
        }
        .eggList {
            padding-top: 0px;
            position: relative;
            width: 310px;
            margin: 0px auto;
        }
        .eggbtn {
            background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/egg_1.png) no-repeat bottom;
            width: 158px;
            height: 187px;
            margin: 0px auto;
            cursor: pointer;
            position: relative;
            background-size: 158px 161px;
        }
        .eggbtn span {
            position: absolute;
            width: 30px;
            height: 60px;
            left: 68px;
            top: 64px;
            color: #ff0;
            font-size: 42px;
            font-weight: bold
        }
        .eggbtn.curr {
            background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/egg_2.png) no-repeat bottom;
            cursor: default;
            z-index: 300;
            background-size: 158px 161px;
        }
        .eggbtn.curr sup {
            position: absolute;
            background: url(images/img-4.png) no-repeat;
            width: 232px;
            height: 181px;
            top: -36px;
            left: -34px;
            z-index: 800;
        }
        .hammer {
            background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/img-6.png) no-repeat;
            width: 74px;
            height: 87px;
            position: absolute;
            text-indent: -9999px;
            z-index: 150;
            left: 168px;
            top: 10px;
        }
        .resultTip {
            position: absolute;
            background: #ffc;
            width: 148px;
            padding: 6px;
            z-index: 500;
            top: 200px;
            left: 10px;
            color: #f60;
            text-align: center;
            overflow: hidden;
            display: none;
            z-index: 500;
        }
        .resultTip b {
            font-size: 14px;
            line-height: 24px;
        }

        .InfoBox {
            padding: 0px 10px;
        }

        /*抽奖机会*/
        .Opportunity {
            width: 120px;
            height: 26px;
            margin: 30px auto 0px;
            background: #ba2d31;
            text-align: center;
            font: 12px/24px "Microsoft YaHei";
            color: #fff;
            border-radius: 30px;
        }

        /*中奖人滚动字幕*/
        .winners_user {
            width: auto;
            height: 24px;
            background: #f2e7b9;
            margin: 0px auto;
            position: relative;
            margin-top: 10px;
        }
        .winners_user .ico {
            width: 29px;
            height: 24px;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 999;
            background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/winners_user.png) center top no-repeat;
            background-size: 29px 24px;
        }
        .winners_user #winners_user {
            width: auto;
            height: 24px;
            overflow: hidden;
            position: relative;
        }
        .winners_user #winners_info {
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .winners_user #winners_info ul {
            width: 100000%;
            height: 24px;
        }
        .winners_user #winners_info li {
            float: left;
            padding-right: 30px;
            line-height: 24px;
            white-space: nowrap;
        }
        .winners_user #winners_info li span {
            color: #e8471d;
            font-weight: bold;
        }

        /*三个按钮*/
        .relevant-list {
            width: 100%;
            height: 80px;
            margin: 0px auto;
            padding: 20px 0px;
            overflow: hidden;
            position: relative;
        }
        .relevant-list div {
            width: 28%;
            height: 80px;
            text-align: center;
            font-size: 14px;
        }
        .relevant-list div a {
            display: block;
            height: 80px;
        }
        .relevant-list div a span {
            margin-top: 15px;
        }
        .relevant-list div a strong {
            font-weight: normal;
            display: block;
            line-height: 1;
        }
        .relevant-list .award_list_ico {
            background: #fff;
            position: absolute;
            left: 0px;
            top: 20px;
        }
        .relevant-list .award_list_ico span {
            width: 32px;
            height: 32px;
            display: inline-table;
            background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/relevant-list.png) -37px top no-repeat;
            background-size: 319px 32px;
        }
        .relevant-list .my_list_ico {
            margin: 0px auto;
            background: #fff;
        }
        .relevant-list .my_list_ico span {
            width: 32px;
            height: 32px;
            display: inline-table;
            background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/relevant-list.png) -144px top no-repeat;
            background-size: 319px 32px;
        }
        .relevant-list .rule_ico {
            background: #fff;
            position: absolute;
            right: 0px;
            top: 20px;
        }
        .relevant-list .rule_ico span {
            width: 32px;
            height: 32px;
            display: inline-table;
            background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/relevant-list.png) -251px top no-repeat;
            background-size: 319px 32px;
        }

        /*弹框*/
        .prompt_box {
            width: 280px;
            background: #fff;
            padding: 0px 10px 10px;
        }
        .prompt_box .column {
            height: 40px;
            border-bottom: 2px solid #fba10f;
            margin-bottom: 10px;
            overflow: hidden;
        }
        .prompt_box .column h3 {
            font-size: 18px;
            color: #faa00c;
            line-height: 40px;
            padding-left: 10px;
            font-weight: normal;
            display: block;
        }
        .prompt_box .column .close {
            float: right;
            height: 40px;
            width: 40px;
            display: block;
            cursor: pointer;
            background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/close.png) top center no-repeat;
            text-indent: -9999px;
        }
        .prompt_box .prompt_info {
            padding: 10px 0px;
            font-size: 14px;
        }
        .prompt_box .prompt_info #Noaward {
            color: #9fa0a0;
            text-align: center;
            display: block;
        }
        .prompt_box .prompt_info #Noaward strong {
            display: block;
            font-size: 16px;
            color: #444444;
        }
        .prompt_box .prompt_info #theAward {
            color: #9fa0a0;
            text-align: center;
            display: block;
        }
        .prompt_box .prompt_info #theAward strong {
            display: block;
            font-size: 16px;
            color: #444444;
        }
        .prompt_box .prompt_info #theAward strong span {
            color: #fba10f;
        }

        /*奖品列表*/
        .award_list {
            width: 100%;
            height: auto;
            margin: 0px auto;
        }
        .award_list ul {
            padding: 10px;
        }
        .award_list ul li {
            position: relative;
            margin-bottom: 20px;
        }
        .award_list ul li .ranking {
            width: 32px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            position: absolute;
            left: 0px;
            top: 0px;
            background: #faa113;
            color: #fff;
            font-size: 18px;
        }
        .award_list ul li.award_1 .ranking {
            background: #e8471d;
        }
        .award_list ul li img {
            width: 100%;
            height: 150px;
            border.........完整代码请登录后点击上方下载按钮下载查看