G不可失
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不可失的更多相关文章
- Storyboards Tutorial 03
这一节主要介绍segues,static table view cells 和 Add Player screen 以及 a game picker screen. Introducing Segue ...
- 文件图标SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink ...
- G彩娱乐网一个程序员到一个销售高手的心路历程
0.引言 我大学本科读的是理工科,后来毕业以后,我逐渐走上了程 序员的道路.每天面对电脑一行一行的敲代码,这被我们程序员们戏称为"搬砖头",因为我们所做的事跟民工搬砖头砌墙本质上是 ...
- [转]Linux下g++编译与使用静态库(.a)和动态库(.os) (+修正与解释)
在windows环境下,我们通常在IDE如VS的工程中开发C++项目,对于生成和使用静态库(*.lib)与动态库(*.dll)可能都已经比较熟悉,但是,在linux环境下,则是另一套模式,对应的静态库 ...
- CentOS 6.6 升级GCC G++ (当前最新版本为v6.1.0) (完整)
---恢复内容开始--- CentOS 6.6 升级GCC G++ (当前最新GCC/G++版本为v6.1.0) 没有便捷方式, yum update.... yum install 或者 添加y ...
- Linux deepin 下sublimes配置g++ openGL
参考 :http://blog.csdn.net/u010129448/article/details/47754623 ubuntu 下gnome只要将代码中deepin-terminal改为gno ...
- [翻译svg教程]svg 中的g元素
svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...
- 软件工程：黄金G点小游戏1.0
我们要做的是黄金G点小游戏: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...
- 2016huasacm暑假集训训练五 G - 湫湫系列故事——减肥记I
题目链接:http://acm.hust.edu.cn/vjudge/contest/126708#problem/G 这是一个01背包的模板题 AC代码: #include<stdio.h&g ...
随机推荐
- 登录phpmyadmin提示: #1045 无法登录 MySQL 服务器
打开phpmyadmin,进行登录,出现以下问题,提示:#1045 无法登录 MySQL 服务器 或许出现以下错误情况:phpmyadmin:#1045 无法登录 MySQL 服务器.Access d ...
- JavaScript 立即执行函数
js中(function(){…})()立即执行函数写法理解 javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法 ...
- Spring任务调度器之Task的使用
Spring Task提供两种方式进行配置,正如大家所想吧,还是一种是annotation(标注),而另外一种就是XML配置了.但其实这里我觉得比较尴尬,因为任务调度这样的需求,通常改动都是比较多的, ...
- oracle数据迁移、备份等
exp db 或者数据泵. 或者ETL工具
- chrome源码学习之：js与底层c++的通信
以查询历史记录为例: 1.在上层history.js中通过chrome.send()来向底层发送事件请求和相关参数,其中'queryHistory'为信号名称,[this.searchText_, t ...
- 为maven插件设置参数的三种方法
很多的maven插件都提供了丰富的可选参数,用户可以通过设置特定的参数值来控制maven插件的行为.设置插件参数的方法主要有三种,分别是命令行设置,POM文件中为插件设置全局参数和POM文件中为插件设 ...
- CentOS7 安装 net-speeder 提升 VPS 网络性能
参考:http://blog.csdn.net/u010027419/article/details/46129639 1.安装依赖库 先安装epel源 rpm -Uvh http://dl.fedo ...
- win32程序通过LPCREATESTRUCT中的lpCreateParams传递参数给窗口过程函数
win32窗口程序中如果需要给窗口过程函数传递自定义参数,可以通过LPCREATESTRUCT结构体中的lpCreateParams进行传递. 创建窗口实例函数: m_hWnd = CreateWin ...
- Unity全视角跟随鼠标右键转换视角实现——研究笔记
using UnityEngine; using System.Collections; public class CameraMove : MonoBehaviour { public Transf ...
- 浅谈声明与定义的区别 分类： C/C++ 2015-06-01 15:08 157人阅读 评论(4) 收藏
以下代码使用平台是VS2012. 清楚明白声明与定义是一名合格的程序猿的基本要求. 本人认为,C++编码过程中谈及"声明"和"定义"是因为我们要使用一个变量.类 ...