<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>人民拍客</title>
<link rel="stylesheet" type="text/css" href="css/wallstreet.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/swipe.css">
<script type="text/javascript" src="js/hammer-2.0.8-min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<style type="text/css" media="screen">
.btnvv {
/* 音乐图标 */
background: url("./images/bgmBtn.svg");
background-size: 100% 100%;
position: absolute;
width: 40px;
height: 40px;
top: 3%;
right: 6%;
z-index: 999;
cursor: pointer;
}
.btnon {
position: absolute;
top: 4%;
right: 20%;
z-index: 999;
/* 光标的形状样式 */
cursor: pointer;
font-size: 18px;
font-weight: bold;
color: #fff;
}
/* 设置动画效果 */
.btnonclick {
animation: circle 1s infinite linear;
}
/* 规定动画 circle：这个是一个图形的形状 */
@-webkit-keyframes circle {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-180deg);
}
100% {
transform: rotate(-360deg);
}
}
#loading {
display: block;
background: #1a1a1a url(http://live.babyfs.cn/web/H5/wjy/drawflowers20170303/loading.gif) center no-repeat;
width: 100%;
height: 100%;
/* 固定定位 */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
}
#loading p {
width: 100%;
height: 50px;
text-align: center;
position: absolute;
top: 50%;
margin-top: -15px;
left: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #999;
z-index: 999999999;
}
</style>
<body>
<audio id="audio1" autoplay src="" style="display:none;"></audio>
<audio id="audio2" autoplay src="" style="display:none;"></audio>
<audio id="audio3" autoplay src="" style="display:none;"></audio>
<!-- loading-加载的东西 -->
<div id="loading">
<p id="lodingnum">0%</p>
</div>
<div class="mark" style="width: 100%;height: 100%;z-index: 999;background-color: rgba(255,255,255,0)"></div>
<div class="p-index" style="display: none;">
<!-- 背景音乐 -->
<div class="btnon">开启</div>
<div class="btnvv">
<audio id="videeo" loop="loop" src="./audio/首页背景音乐.mp3"></audio>
</div>
<div class="wrap">
<!-- page0 开场图 红花 -->
<div class="section race-intro " id="page0">
<div class="content-item" style="background:url(./images/p1-begin.jpg);background-position: top center;
background-size: cover;">
<!-- -webkit-animation: resize 1.2s infinite linear;这个闪动的效果 -->
<div class="u-guideText z-move">谁是拍客？</div>
</div>
<div class="footer"><img src="./images/next-page.png" alt=""></div>
</div>
<!-- page1 大爷大妈在公园 -->
<div class="section hidden" id="page1">
<div id="firstgif" class="content-item" style="background:url(./images/p1-1.gif);background-position: top center;
background-size: cover;">
<div class="u-guideText z-move" style="width: 100%;left: 20%;">以前的摄影爱好者，别名摄影老法师</div>
<div class="u-guideTexttop z-move">请打开声音</div>
</div>
<div class="footer"><img src="./images/next-page.png" alt=""></div>
</div>
<!-- page2 模糊红花 -->
<div class="section hidden" id="page2">
<div id="unclearflowser" class="content-item" style="background:url(./images/p1-24.jpg);background-position: top center;
background-size: cover;">
<div id="page2text" class="u-guideText z-move">试试双击变清晰</div>
</div>
<div id="clearflowser" class="content-item" style="background:url(./images/p1-25.jpg);background-position: top center;
background-size: cover;display: none;">
</div>
<div class="footer"><img src="./images/next-page.png" alt=""></div>
</div>
<!-- page3 调节亮度 -->
<div class="section hidden" id="page3">
<div id="page3clearflowser" class="content-item" style="background:url(./images/p1-25.jpg);background-position: top center;
background-size: cover;">
<!-- 进度条调节亮度 -->
<div class="u-brightness">0.1
<input id='factorSlider' type='range' min='0.1' max='1.0' step='0.1' value='0.8' style="background: linear-gradient(to right, rgb(5, 156, 250), white 74.4%, white);" /> 1.0
</div>
<div id="page3text" class="u-guideText z-move">滑动进度条调亮度</div>
</div>
<div class="footer"><img src="./images/next-page.png" alt=""></div>
</div>
<!-- page4 大妈拍照 -->
<div class="section hidden" id="page4">
<div id="page4clearflower" class="content-item" style="background:url(./images/p1-25.jpg);background-position: top center;
background-size: cover;">
<div class="u-guideText z-move">双击拍照</div>
</div>
<div id="addperson" class="content-item" style="background:url(./images/p1-2.gif);background-position: top center;
background-size: cover;display: none;">
</div>
<div id="fixperson" class="content-item" style="background:url(./images/p1-30.jpg);background-position: top center;
background-size: cover;display: none;">
<div id="page4text" class="u-guideText z-move">双击拍照</div>
</div>
<div id="shotperson" class="content-item" style="background:url(./images/p1-3.gif);background-position: top center;
background-size: cover;display: none;">
</div>
<div class="footer"><img src="./images/next-page.png" alt=""></div>
</div>
<script type="text/javascript">
//双击模拟聚焦图片变清晰
//hammer:实现移动端的手势，作用（1.为移动端网页添加相关手势。2.去除移动端上的点击事件的300sm延迟）
// 创建一个hammer实例
var hammertime = new Hammer(document.getElementById("unclearflowser"));
// 添加一个事件doubletap
hammertime.on("doubletap", function(e) {
//当事件触发时
$('#unclearflowser').hide(); //隐藏
$('#clearflowser').show(); //显示
var audio1 = document.getElementById("audio1");
setTimeout(function() { //定时设置
$("#audio1").attr("src", "audio/s1.mp3"); //arrt设置属性
audio1.play(); //播放
}, 500)
var audio2 = document.getElementB
Taber.zip （91个子文件） 
Untitled-1.js 551B
JS jquery.imgpreload.min.js 1KB hammer-2.0.8-min.js 27KB jquery.mousewheel.js 4KB jquery-2.1.4.min.js 108KB jquery.easing.1.3.js 9KB style images 
level2-03.jpg 59KB p3-11.jpg 1.08MB
bgmBtn.svg 1KB p3-12.jpg 1.11MB p2-8.jpg 133KB
weixin-share-guide.png 72KB erweima.png 1KB p2-5.jpg 116KB p2-7.jpg 131KB
p2.gif 1.03MB p1-2-cycle.gif 1.14MB level2-01.png 675KB next-page.png 1KB level2-02.jpg 54KB p1-2.gif 1.03MB no-content.png 14KB p1-1.gif 5.56MB client.png 15KB download-2.jpg 42KB tips4.png 89KB p2-4.jpg 377KB tips1.png 57KB download-link2.jpg 17KB p1.gif 7.33MB p3-10.jpg 1.11MB p3-3.jpg 1.05MB p1-25.jpg 355KB tips5.png 54KB back.png 1KB p2-1.gif 660KB p2-9.jpg 192KB p2-1111.jpg 188KB p1-24.jpg 147KB p3-2.jpg 1.07MB download-3.jpg 4KB tips3.png 57KB close.png 4KB p1-begin.jpg 330KB p2-11.jpg 116KB p1-3.gif 1.98MB star.png 5KB p2-6.jpg 140KB p3-9.jpg 1.17MB p1-30.jpg 346KB download-link3.jpg 14KB p2-2.jpg 84KB units-icons.png 6KB download-link4.jpg 22KB p2-3.jpg 93KB p3-7.jpg 1.06MB bg.jpg 25KB menu.png 4KB p3-8.jpg 1.14MB p2-12.jpg 124KB p1-1-cycle.gif 5.55MB level2-03.png 751KB camera.png 9KB download-link1.jpg 17KB arrow-left.png 409B share.png 4KB download-1.jpg 556KB download.jpg 604KB p3-6.jpg 1.09MB p3-1.jpg 1.03MB p2-10.jpg 112KB p2-1.jpg 105KB tips2.png 68KB level2-01.jpg 55KB p3-4.jpg 1.03MB level2-02.png 960KB p3-5.jpg 1.04MB p2-tips2.png 107KB loading.gif 43KB p2-tips1.png 74KB CSS swipe.css 10KB wallstreet.css 10KB common.css 11KB animate.css 79KB
人民拍客.html 27KB audio 换装页背景音乐.mp3 3.94MB 首页背景音乐.mp3 690KB s1.mp3 42KB s3.mp3 54KB s2.mp3 67KB .vscode settings.json 42B
评论5