G不可失

2023-01-29 12:30:11

html和css部分和引用的库

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>G不可失</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/index.js"></script>

</head>
<body>
<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="">

<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 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/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>

这是用js加jq弄的

$(function() {
FastClick.attach(document.body);
//首屏预加载
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(0,function() {
preload();
});
$("#logo").show();

}
}
}

//所有图片预加载
// 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.onload = function() {
imgNum++;
var percent = Math.ceil(imgNum/allLen*100);
$("#processBar span").html(percent+"%");
// alert(percent);
console.log($("#processBar span").html());
$("#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();
}
}
img.src = $(".page img:not('#page1 img')").eq(j).attr("data-src");
}
}

//阻止页面默认事件
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();
})
}
})

//抽奖部分
var timeOut = function(){ //超时函数
$("#trunplate").rotate({
angle:0,
duration: 10000,
animateTo: 2160, //这里是设置请求超时后返回的角度，所以应该还是回到最原始的位置，2160是因为我要让它转6圈，就是360*6得来的
callback:function(){
alert('网络超时')
}
});
};
var rotateFunc = function(awards,angle,data){ //awards:奖项，angle:奖项对应的角度，text:提示文字
$('#trunplate').stopRotate();
$("#trunplate").rotate({
angle:0,
duration: 6000,
animateTo: angle+1440, //angle是图片上各奖项对应的角度，1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^
callback:function(){
// alert(text)
succFn(data);
}
});
};
$("#startBtn").click(function() {
var time = [0,1];
// time = time[Math.floor(Math.random()*time.length)];
var time = 1;
if(time==0){
timeOut(); //网络超时
}
if(time==1){
// var data = [1,2,3,0]; //返回的数组
// data = Math.floor(Math.random()*4);
var data = 0;
if(data==1){
rotateFunc(1,-75,data)
}
if(data==2){
var angle = [-225,-315];
angle = angle[Math.floor(Math.random()*angle.length)];
rotateFunc(2,angle,data)
}
if(data==3){
var angle = [-45,-165,-345];
angle = angle[Math.floor(Math.random()*angle.length)]
rotateFunc(3,angle,data)
}
if(data==0){
var angle = [-15,-105,-135,-195,-255,-285];
angle = angle[Math.floor(Math.random()*angle.length)]
rotateFunc(0,angle,data)
}
}
});
function succFn(data) {
$("#page10").show();
$("#page9").hide();
switch (data) {
case 0:
$("#noawardBox").show();
break;
case 1:
$("#awardBox").show().nextAll().hide();
$("#priseBox").attr("src","img/prise1.png");
break;
case 2:
$("#awardBox").show().nextAll().hide();
$("#priseBox").attr("src","img/prise2.png");
break;
case 3:
$("#awardBox").show().nextAll().hide();
$("#priseBox").attr("src","img/prise3.png");
break;
}
}
})

码农公寓

相关文章