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. CNN for NLP (CS224D)

    斯坦福课程CS224d: Deep Learning for Natural Language Processing lecture13:Convolutional neural networks - ...

  2. bootstrap-datetime 的使用

    bootstrap-datetime js的下载 http://pan.baidu.com/s/1eQnE5dK html的代码 <div class="input-group dat ...

  3. hdu2348题解

    又恬不知耻的开始写题解了,暑假到了,QAQ然而想我这样的弱逼是没有暑假的sad,还是老老实实刷题吧. 题目大意:给一个小车的宽度和长度和两条道路的宽度,判断小车能否通过. 思路:可以先看下面的图,我们 ...

  4. 初步认知java的方法

    1.正确区分函数和方法: 面向对象的语言叫做方法,面向过程的语言叫做函数,两者的意义是一样的,只是叫法不同.java是面向对象的语言,所以用方法. 2.方法的定义: 就是有名字的代码段 3.方法的目的 ...

  5. PHP的学习--PHP加密

    PHP中的加密方式有如下几种 1. MD5加密 string md5 ( string $str [, bool $raw_output = false ] ) 参数 str  --  原始字符串. ...

  6. SpringMVC，3种不同的URL路由配置方法

    1. 先说说一种比较常见的: <servlet> <servlet-name>theDispatcher</servlet-name> <servlet-cl ...

  7. job history 的查看

    linux shell 可以启动 mapred historyserver 然后根据显示的端口hostname+port进行访问(一般默认端口是19888)

  8. 3-HOP: A High-Compression Indexing Scheme for Reachability Query

    title: 3-HOP: A High-Compression Indexing Scheme for Reachability Query venue: SIGMOD'09 author: Ruo ...

  9. OpenGL变换

    概述 OpenGL变换矩阵 实例:GL_MODELVIEW矩阵 实例:GL_PROJECTION矩阵 概述 OpenGL管线中,在光栅化操作之前,包括顶点位置与法线向量的几何数据经顶点操作与图元装配操 ...

  10. 命令模式（Command Pattern）

    命令模式的本质是对命令进行封装,将发出命令的责任和执行命令的责任分割开.命令模式是为了解决命令的请求者和命令的实现者之间的耦合关系. 将来自客户端的请求传入一个对象,从而使你可用不同的请求对客户进行参 ...