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>
<!-- <script type="text/javascript" src="js/turnplate.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="">
<!-- <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="" 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;
}
}
})

G不可失的更多相关文章

  1. Storyboards Tutorial 03

    这一节主要介绍segues,static table view cells 和 Add Player screen 以及 a game picker screen. Introducing Segue ...

  2. 文件图标SVG

    ​<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink ...

  3. G彩娱乐网一个程序员到一个销售高手的心路历程

    0.引言 我大学本科读的是理工科,后来毕业以后,我逐渐走上了程 序员的道路.每天面对电脑一行一行的敲代码,这被我们程序员们戏称为"搬砖头",因为我们所做的事跟民工搬砖头砌墙本质上是 ...

  4. [转]Linux下g++编译与使用静态库(.a)和动态库(.os) (+修正与解释)

    在windows环境下,我们通常在IDE如VS的工程中开发C++项目,对于生成和使用静态库(*.lib)与动态库(*.dll)可能都已经比较熟悉,但是,在linux环境下,则是另一套模式,对应的静态库 ...

  5. CentOS 6.6 升级GCC G++ (当前最新版本为v6.1.0) (完整)

    ---恢复内容开始--- CentOS 6.6 升级GCC G++ (当前最新GCC/G++版本为v6.1.0) 没有便捷方式, yum update....   yum install 或者 添加y ...

  6. Linux deepin 下sublimes配置g++ openGL

    参考 :http://blog.csdn.net/u010129448/article/details/47754623 ubuntu 下gnome只要将代码中deepin-terminal改为gno ...

  7. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  8. 软件工程：黄金G点小游戏1.0

    我们要做的是黄金G点小游戏: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...

  9. 2016huasacm暑假集训训练五 G - 湫湫系列故事——减肥记I

    题目链接:http://acm.hust.edu.cn/vjudge/contest/126708#problem/G 这是一个01背包的模板题 AC代码: #include<stdio.h&g ...

随机推荐

  1. 在博文中嵌入Javascript代码

    今天吃饭时无聊,突然想到Markdown除了兼容HTML会不会也兼容Javascript,于是博文里除了码文插音乐还可以干点更好玩的事儿了,可以自动修改markdown文件本身,比如说自动修改从Git ...

  2. CLR via C# 3rd - 03 - Shared Assemblies and Strongly Named Assemblies

    1. Weakly Named Assembly vs Strong Named Assembly        Weakly named assemblies and strongly named ...

  3. android环境配置

    1.计算机右键点击属性 2.点击高级系统设置 3.选择高级——>选择环境变量 4.点击系统变量下的新建 1)新建ANDROID_HOME:你的sdk所在的目录 2)新建JAVA_HOME:C:\ ...

  4. 将内存ffff:0~ffff:b中的数据拷贝到0:200~0:20b中

    我是按照字,也就是2个字节拷贝的. 这样就可以让循环减半== assume cs:sad sad segment start: mov ax, 0ffffh mov ds, ax mov bx, 0h ...

  5. C语言中内存的申请函数

    C语言跟内存申请相关的函数主要有 alloca,calloc,malloc,free,realloc,sbrk等. alloca是向栈申请内存,因此无需释放. malloc分配的内存是位于堆中的,并且 ...

  6. jekins构建自动化项目的步骤

    填入项目名字 源码管理从git自动拉取代码到工作目录 jenkins拉取代码会到工作空间linux下安装完目录是/var/lib/jenkins/workspace/jeekins-test(可以根据 ...

  7. CE STEPLDR

    作用:初始化CPU.内存.Flash,复制EBoot到内存并跳入EBoot中运行. 原理:S3C2416有 8-KB 的steppingstone(暂时翻译为垫脚石),在Nand启动模式下可把Nand ...

  8. Servlet高级

    1. 获取初始化参数 在web.xml中配置Servlet时,可以配置一些初始化参数.而在Servlet中可以通过ServletConfig接口提供的方法来取得这些参数. index.jsp < ...

  9. LeetCode-Search in Rotated Sorted Array II

    Follow up for "Search in Rotated Sorted Array": What if duplicates are allowed? Would this ...

  10. 修复FreeBSD上的ufs文件系统

    昨天在两台FreeBSD上配置好Heartbeat服务(两台机器是用网线连通的,做为Heartbeat的两个节点),启动服务时Heartbeat检测到crmd守护进程没起来,于是它就尝试重启两台机器以 ...