手机网页h5实现介绍页，支持手势识别。

最新推荐文章于 2022-05-28 01:25:08 发布

545实验室

最新推荐文章于 2022-05-28 01:25:08 发布

阅读量806

点赞数

文章标签：网页手势识别 jquery.touchSwipe.mi css动画

本文链接：https://blog.csdn.net/liguangqian330/article/details/73160344

版权

下载地址：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>