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. 【HTML5】canvas画布练习

    第一步:获取画布元素 var canvas = document.getElementById("myCanvas"); var context = canvas.getConte ...

  2. 【JS】falsy与truthy

    1.Falsy值,当进行逻辑判断时均为false(如!!false==false).六个Falsy值:false.undefined.null.正负0.NaN."". 2.其余所有 ...

  3. 支持向量机 (SVM)分类器原理分析与基本应用

    前言 支持向量机,也即SVM,号称分类算法,甚至机器学习界老大哥.其理论优美,发展相对完善,是非常受到推崇的算法. 本文将讲解的SVM基于一种最流行的实现 - 序列最小优化,也即SMO. 另外还将讲解 ...

  4. Erlang Materials Outline

    Motivation 因The Erlang Run-Time System迟迟没有出版,不等了. 梳理一下学习Erlang过程中的学习笔记,以准备一个关于Erlang的small but tight ...

  5. java的覆盖重写隐藏和C#中的不同

    先看下C#中的: C#中覆盖 隐藏 重写这三种有不同的意义,而Java中不同. 1. java中没有new ,使用new会报错,编译不通过. 2. java中重写和覆盖应该是一个意思 static c ...

  6. 发一则自己创作的Lae程序员小漫画，仅供一乐

  7. 声明提前js变量

    声明提前问题相关 js的变量声明语句无论出现在何处,都会先与其他代码首先被执行,使用var声明关键词声明变量的 作用于是当前的执行上下文,有可能是外围函数,或者,当变量声明在函数体之外时,则为全局变量 ...

  8. find和grep的区别

    find命令:在系统当中搜索符合条件的文件名,如果需要匹配,使用通配符匹配,通配符是完全匹配. grep命令:在文件当中搜索符合条件的字符串,如果需要匹配,使用正侧表达式匹配 正侧表达式是包含匹配.

  9. org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection 原因

    org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection 可能出现的原因     ...

  10. MVC授权

    public class CommonController : Controller { protected override void OnAuthorization(AuthorizationCo ...