G不可失

这是一个手机移动端抽奖活动页面。

 

 

 

CSS部分代码：

html, body {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
}
#wrap {
    height: inherit;
    position: relative;
    z-index: 1;
    /*overflow-x: hidden;*/
}
#logo {
    position: absolute;
    width: 100%;
    top:30px;
    z-index: 10;
    left: 0;
}
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
}
.page .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}
#page1 .section1, #page2 .section1 {
    width: 100%;
    margin: 12.5% auto 0;
}
#page1 .section2 {
    width: 73.28%;
    margin: 0px auto;
    position: relative;
}
#processBar {
    /*width: 94.68%;*/
    /*width: 10px;*/
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: url("../img/page1_3.png") 6px 0 no-repeat;
    background-size: cover;
}
/*page2*/
 #page2 .section2 {
    width: 63.4375%;
    margin: 0 auto;
}
/*page3*/
 .top-title {
    width: 45.9475%;
    margin: 12.5% auto 0;
}
#page3 .section2 {
    width: 68.28125%;
    /*margin-top: -10%;*/
    margin: -11% auto 0;
}
#page3 .vedioBox {
    width: 70.9375%;
    margin: 0 auto;
    position: relative;
    top: -9.03125%;
}
#vidBox {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: black;
}
#vid {
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
}
#page3 .tips {
    width: 52.6556%;
    margin-left: 6.25%;
    margin-top: -8.25%;
}
/*page4*/
 #page4 .section2, #page6 .section2, #page7 .section2, #page8 .section2 {
    width: 78.125%;
    margin: 0 auto;
}
#open1, #open2, #open3 {
    width: 43.90625%;
    margin: 0 auto;
}
#open1 img {
    margin-bottom: 20px;
}
#info {
    width:42.8125%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 3%;
}
/*.section3{
 width: 100%;
 position: absolute;
 bottom: 3%;
 left: 0;
}*/
 
/*page5*/
 #backBtn {
    position: absolute;
    left: 0;
    bottom: 3%;
}
/*page8*/
 #page8 .section3 {
    width: 91.25%;
    margin: 0 auto;
}
#bookBtn {
    position: absolute;
    left: 0;
    bottom: 3%;
}
/*page9*/
 .rotatePlate {
    width: 68.90625%;
    margin: 9.375% auto 0;
    position: relative;
}
#startBtn {
    width: 55.625%;
    margin: 9.375% auto 0;
}
.pointer {
    position: absolute;
    z-index: 11;
    left: 37.6417%;
    top: 9.0703%;
    width: 24.4897%;
}
/*page10*/
 #awardBox, #noawardBox {
    width: 75%;
    background-color: #c90716;
    margin: 0 auto;
    padding-top: 6.25%;
    border-radius: 10px;
}
#awardBox .section1 {
    width: 76.25%;
    margin: 0 auto;
}
.input-group {
    width: 87.2917%;
    margin: 4.2% auto;
    position: relative;
}
.input-group input {
    position: absolute;
    background-color: #b5b5b5;
    outline: none;
    border:none;
    height: 90%;
    width: 66.667%;
    left: 23.81%;
    top: 2px;
}
#submit, .shareBtn, .enterBtn {
    display: block;
    width: 57.083%;
    margin: 0 auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*noaward*/
 .noaward {
    width: 73.75%;
    margin: 0 auto;
}
.goTmall {
    width: 89.1667%;
    margin: 0 auto;
}
/*分享*/
 #shareMark {
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}
#shareMark img {
    width: 19.21875%;
    position: absolute;
    right: 50px;
    top:50px;
}

 

JS部分代码：

//首屏预加载
var page1Num = 0;
for (var i = 0, len = $("#page1 img").length; i < len; i++) {
    var img = new Image();
    img.src = $("#page1 img").eq(i).attr("data-src");
    img.onload = function () {
        page1Num++;
        if (page1Num == len) {
            $("#page1 img").attr("src", function () {
                return $(this).attr("data-src");
            })
            $("#page1 img").removeAttr("data-src");
            $("#wrap>img").attr("src", function () {
                return $(this).attr("data-src");
            })
            $("#wrap>img").removeAttr("data-src");
            $("#page1").show();
            $("#logo").show();
            preload();
        }
    }
}
 
//所有图片预加载
// preload();
 
function preload() {
    var imgNum = 0;
    for (var j = 0, allLen = $(".page img:not('#page1 img')").length; j < allLen; j++) {
        var img = new Image();
        img.src = $(".page img:not('#page1 img')").eq(j).attr("data-src");
        img.onload = function () {
            imgNum++;
            var percent = Math.ceil(imgNum / allLen * 100);
            $("#processBar span").html(percent + "%");
            // alert(percent);
            $("#processBar").css({
                width: percent * 0.9468 + "%"
            })
            // console.log(imgNum);
            if (imgNum == allLen) {
                // alert(percent);
                $(".page img:not('#page1 img')").attr("src", function () {
                    return $(this).attr("data-src");
                })
                $("#page1").hide();
                $("#page2").show();
            }
        }
    }
}
 
//阻止页面默认事件
document.addEventListener('touchmove', function (e) {
    e.preventDefault();
}, false);
$("#page2").swipe({
    swipeUp: function (e) {
        $("#page2").hide();
        $("#page3").show();
        e.stopPropagation();
    }
});
$("#page3").swipe({
    swipeUp: function (e) {
        $("#page3").hide();
        $("#page4").show();
        e.stopPropagation();
    },
    swipeDown: function (e) {
        $("#page3").hide();
        $("#page2").show();
        e.stopPropagation();
    }
});
$("#page4").swipe({
    swipeDown: function (e) {
        $("#page4").hide();
        $("#page3").show();
        e.stopPropagation();
    }
});
$("#page5").swipe({
    swipeDown: function (e) {
        $("#page5").hide();
        $("#page4").show();
        e.stopPropagation();
    }
});
$("#page6").swipe({
    swipeDown: function (e) {
        $("#page6").hide();
        $("#page4").show();
        e.stopPropagation();
    }
});
$("#page7").swipe({
    swipeDown: function (e) {
        $("#page7").hide();
        $("#page6").show();
        e.stopPropagation();
    }
});
$("#page8").swipe({
    swipeDown: function (e) {
        $("#page8").hide();
        $("#page7").show();
        e.stopPropagation();
    }
});
$("#page9").swipe({
    swipeDown: function (e) {
        $("#page9").hide();
        $("#page8").show();
        e.stopPropagation();
    }
});
$("#info").swipe({
    tap: function (e) {
        $("#page4").hide();
        $("#page5").show()
    }
});
$("#backBtn").swipe({
    tap: function (e) {
        $("#page5").hide();
        $("#page4").show();
    }
});
//开启一重豪礼
$("#open1").swipe({
    tap: function () {
        $("#page4").hide();
        $("#page6").show();
    }
})
//开启二重豪礼
$("#open2").swipe({
    tap: function () {
        $("#page6").hide();
        $("#page7").show();
    }
})
//开启三重豪礼
$("#open3").swipe({
    tap: function () {
        $("#page7").hide();
        $("#page8").show();
    }
})
//激情预订
$("#bookBtn").swipe({
    tap: function () {
        $("#page8").hide();
        $("#page9").show();
    }
})
//分享
$(".shareBtn").swipe({
    tap: function () {
        $("#shareMark").show();
    }
})
$("#shareMark").swipe({
    tap: function () {
        $(this).hide();
    }
})
$(".vedioBox").swipe({
    tap: function () {
        $("#vidBox").show().find('#vid')[0].play();
        $("#vid").on('ended', function () {
            $("#vidBox").hide();
        })
    }
})

HTML部分代码：

<div id="wrap">
    <img data-src="img/logo.png" alt="" id="logo">
    <div id="page1" class="page">
        <img data-src="img/logo.png" alt="" style="display:none">
        <img data-src="img/bg1.jpg" alt="" class="bg">
        <div class="section1">
            <img data-src="img/page1_1.png" alt="">
        </div>
        <div class="section2">
            <img data-src="img/page1_2.png" alt="">
            <!-- <span>0%</span> -->
            <div id="processBar">
                <img data-src="img/dot.png" alt=""> <span>0%</span>
 
            </div>
        </div>
    </div>
    <div id="page2" class="page">
        <img data-src="img/bg1.jpg" alt="" class="bg">
        <div class="section1 animated slideInUp">
            <img data-src="img/page1_1.png" alt="">
        </div>
        <div class="section2 animated flash">
            <img data-src="img/page2_1.png" alt="">
        </div>
    </div>
    <div id="page3" class="page">
        <img data-src="img/bg2.jpg" alt="" class="bg">
        <div class="top-title  animated slideInLeft">
            <img data-src="img/page3_2.png" alt="">
        </div>
        <div class="section2 animated slideInRight">
            <img data-src="img/page3_1.png" alt="">
        </div>
        <div class="vedioBox">
            <img data-src="img/page3_4.png" alt="">
        </div>
        <div class="tips animated pulse">
            <img data-src="img/page3_3.png" alt="">
        </div>
    </div>
    <div id="vidBox">
        <video controls="" width="100%" id="vid">
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
    <div id="page4" class="page">
        <img data-src="img/bg1.jpg" alt="" class="bg">
        <div class="top-title  animated slideInLeft">
            <img data-src="img/page3_2.png" alt="">
        </div>
        <div class="section2 animated slideInRight">
            <img data-src="img/page4_1.png" alt="">
        </div>
        <!-- <div class="section3">
                <div id="open1" class="bounce">
                    <img data-src="img/page4_2.png" alt="">
                </div>
                <div id="info">
                    <img data-src="img/page4_3.png" alt="">
                </div>
            </div> -->
        <div id="open1" class="bounce">
            <img data-src="img/page4_2.png" alt="">
        </div>
        <div id="info">
            <img data-src="img/page4_3.png" alt="">
        </div>
    </div>
    <div id="page5" class="page">
        <img data-src="img/bg3.jpg" alt="" class="bg">
        <div id="backBtn">
            <img data-src="img/page5_1.png" alt="">
        </div>
    </div>
    <div id="page6" class="page">
        <img data-src="img/bg1.jpg" alt="" class="bg">
        <div class="top-title  animated slideInLeft">
            <img data-src="img/page3_2.png" alt="">
        </div>
        <div class="section2 animated slideInRight">
            <img data-src="img/page6_2.png" alt="">
        </div>
        <div id="open2" class="bounce">
            <img data-src="img/page6_1.png" alt="">
        </div>
    </div>
    <div id="page7" class="page">
        <img data-src="img/bg1.jpg" alt="" class="bg">
        <div class="top-title  animated slideInLeft">
            <img data-src="img/page3_2.png" alt="">
        </div>
        <div class="section2 animated slideInRight">
            <img data-src="img/page7_1.png" alt="">
        </div>
        <div id="open3" class="bounce">
            <img data-src="img/page7_2.png" alt="">
        </div>
    </div>
    <div id="page8" class="page">
        <img data-src="img/bg1.jpg" alt="" class="bg">
        <div class="top-title  animated slideInLeft">
            <img data-src="img/page3_2.png" alt="">
        </div>
        <div class="section2 animated slideInRight">
            <img data-src="img/page8_1.png" alt="">
        </div>
        <div class="section3 animated pulse2">
            <img data-src="img/page8_2.png" alt="">
        </div>
        <div id="bookBtn">
            <img data-src="img/page8_3.png" alt="">
        </div>
    </div>
    <div id="page9" class="page">
        <img data-src="img/bg1.jpg" alt="" class="bg">
        <div class="top-title  animated slideInLeft">
            <img data-src="img/page3_2.png" alt="">
        </div>
        <div class="rotatePlate">
            <div class="pointer">
                <img data-src="img/pointer.png" alt="">
            </div>
            <div id="trunplate">
                <img data-src="img/plate.png">
            </div>
        </div>
        <div id="startBtn">
            <img data-src="img/startBtn.png" alt="">
        </div>
    </div>
    <!-- 中奖结果 -->
    <div id="page10" class="page">
        <img data-src="img/bg1.jpg" alt="" class="bg">
        <div class="top-title  animated slideInLeft">
            <img data-src="img/page3_2.png" alt="">
        </div>
        <div id="awardBox" style="display:none">
            <!-- <img data-src="img/prise1.png" alt="" > -->
            <img data-src="img/prise2.png" alt="" style="display:none">
            <img data-src="img/prise3.png" alt="" style="display:none">
            <div class="section1">
                <img data-src="img/prise1.png" alt="" id="priseBox">
            </div>
            <form action="" method="post">
                <div class="input-group">
                    <img data-src="img/userBox.png" alt="">
                    <input type="text" id="username">
                </div>
                <div class="input-group">
                    <img data-src="img/telBox.png" alt="">
                    <input type="tel" id="usertel">
                </div>
                <a href="javascript:void(0)" id="submit">
                    <img data-src="img/submit.png" alt="">
                </a>
            </form>
        </div>
        <div id="noawardBox" style="display:none">
            <div class="noaward">
                <img data-src="img/noprise.png" alt="">
            </div>
            <a href="javascript:void(0)" class="shareBtn">
                <img data-src="img/share.png" alt="">
            </a>
            <div class="goTmall">
                <img data-src="img/gotmall.png" alt="">
            </div>
            <a href="javascript:void(0)" class="enterBtn">
                <img data-src="img/enter.png" alt="">
            </a>
        </div>
        <div id="shareMark" style="display:none">
            <img data-src="img/arrow.png" alt="">
        </div>
    </div>
</div>

百度网盘完整文件下载地址：http://pan.baidu.com/s/1slVgg6T