下载地址:http://download.csdn.net/detail/liguangqian330/9869670
效果图:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<title>545实验室</title>
<link rel="stylesheet" href="css/animate.min.css">
<style>
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
.container { width: 100%; height: 100%; position: absolute; left: 0; top: 0%; }
.container .page { height: 100%; position: relative; color:#fff;text-align:center; }
.container .page h1{padding-top:120px; }
.container .page0 { }
.container .page1 { background-color:#93F; }
.container .page2 { background-color:#F90; }
.container .page3 { background-color: green; }
.container .page4 { background-color: tomato; }
.container .page1 img.no1 { position: absolute; left: 10px; top: 50px; -webkit-transition: all 1s ease 0s; }
.container .page1.cur img.no1 { -webkit-transform: rotate(720deg); }
.container .page1 img.no2 { position: absolute; left: 600px; top: 50px; -webkit-transition: all 1s ease 2s; }
.container .page1.cur img.no2 { left: 30px; top: 100px; -webkit-transform: rotate(720deg); }
.xiangxiatishi { position: fixed; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); -webkit-animation: dong 1s linear 0s infinite alternate; }
@-webkit-keyframes dong { from {bottom:20px;}to { bottom: 60px; }}
</style>
</head>
<body onmousewheel="return false;">
<!--代码部分begin-->
<div class="container">
<div style="width:100%;position:fixed;left:0;top:0;z-index:100">
<audio id="music" src="music/you_make_me_wanna.mp3" autoplay="autoplay" loop="loop"></audio>
<a id="audio_btn"><img id="music_btn" src="image/play.png" alt="" style="width:25px;height:25px;margin-right:20px;margin-top:20px;float:right;" /></a>
</div>
<!--第一页-->
<div class="page page0 cur">
<div style="z-index:2;width:100%;height:100%">
<div id="div_page_1_ineer_top" style="width:100%;height:60%;">
<img src="image/page_2.png" alt="" style="width:100%;margin-top:20px">
</div>
<div id="div_page_1_ineer_bottom" style="width:100%;height:40%;">
<img src="image/page_1.png" alt="" style="width:100%;;">
</div>
</div>
</div>
<div class="page page1">
<!--<h1 id="h1_two">你好,我是1号屏幕,鼠标单击向下/向上拖动</h1>-->
</div>
<div class="page page2">
<!-- <h1>你好,我是2号屏幕,鼠标单击向下/向上拖动</h1>-->
</div>
<div class="page page3">
<!--<h1>你好,我是3号屏幕,鼠标单击向下/向上拖动</h1>-->
</div>
<div class="page page4">
<!--<h1>你好,我是4号屏幕,到底了,鼠标单击向上拖动</h1>-->
</div>
</div>
<div id="page_next" style="width:100%;position:fixed;left:0;bottom:0;z-index:100;text-align:center">
<a id="turn_down_btn"><img id="turn_down_img" src="image/turn_down.png" alt="" style="width:30px;height:30px;margin-right:20px;
margin-bottom:20px;" /></a>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/1.11.1/jquery-1.11.1.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script>
var nowpage = 0;
$(document).ready(
function() {
//给最大的盒子增加事件监听
$(".container").swipe(
{
swipe:function(event, direction, distance, duration, fingerCount) {
if(direction == "up"){
nowpage = nowpage + 1;
}else if(direction == "down"){
nowpage = nowpage - 1;
}
dealEvent();
}
}
);
}
);
//初始化第一页动画效果
page_1_anim_1();
setTimeout(page_1_anim_2, 1000);
setTimeout(removeClass1, 2000);
setTimeout(removeClass, 1000);
page_next_anim();
function dealEvent(){
if(nowpage > 4){
nowpage = 4;
}
if(nowpage == 4){
var vNode=document.getElementById("page_next");
vNode.style.display= 'none';
}else{
var vNode=document.getElementById("page_next");
vNode.style.display= '';
}
if(nowpage < 0){
nowpage = 0;
}
$(".container").animate({"top":nowpage * -100 + "%"},400);
$(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur");
if(nowpage==0){
page_1_anim_1();
setTimeout(page_1_anim_2, 1000);
setTimeout(removeClass1, 2000);
setTimeout(removeClass, 1000);
}else{
var vNode=document.getElementById("div_page_1_ineer_bottom");
vNode.style.display= 'none';
}
if(nowpage==1){
$('#h1_two').addClass('flip' + ' animated one');
setTimeout(removeClass, 1000);
}
}
function removeClass(){
$('#h1_two').removeClass();
$('#div_page_1_ineer_top').removeClass();
}
function removeClass1(){
$('#div_page_1_ineer_bottom').removeClass();
}
function page_1_anim_1(){
$('#div_page_1_ineer_top').addClass('slideInDown' + ' animated one');
}
function page_1_anim_2(){
var vNode=document.getElementById("div_page_1_ineer_bottom");
vNode.style.display= 'block';
$('#div_page_1_ineer_bottom').addClass('slideInRight' + ' animated one');
}
function page_next_anim(){
$('#page_next').addClass('bounce' + ' animated infinite');
}
//音乐播放暂停
$("#audio_btn").click(function(){
var music = document.getElementById("music");
if(music.paused){
music.play();
$("#music_btn").attr("src","image/play.png");
}else{
music.pause();
$("#music_btn").attr("src","image/pause.png");
}
});
//点击进入下一页
$("#page_next").click(function(){
nowpage = nowpage + 1;
dealEvent();
});
$(function(){
//$(".container .page0").backstretch(["image/H5_01.jpg"]); //背景
$(".container .page1").backstretch(["image/H5_02.jpg"]); //背景
$(".container .page2").backstretch(["image/H5_03.jpg"]); //背景
$(".container .page3").backstretch(["image/H5_04.jpg"]); //背景
$(".container .page4").backstretch(["image/H5_05.jpg"]); //背景
$(".container .page0").backstretch(["image/H5_01.jpg","H5_01.jpg","H5_01.jpg"],{duration:1000}); //元素背景,切换现实
});
</script>
<!--代码部分end-->
</body>
</html>