利用jquery.touchSwipe.js实现的移动滑屏效果。

亲测：兼容ie8及各种浏览器

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script> 点击下载

		*{

			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;

		}

		.container .page0{

			background-color: blue;

		}

		.container .page1{

			background-color: pink;

		}

		.container .page2{

			background-color: yellow;

		}

		.container .page3{

			background-color: green;

		}

		.container .page4{

			background-color: tomato;

		}

        .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;

			}

		}

　　

<body onmousewheel="return false;">

	<div class="container">

		<div class="page page0 cur"><h1>你好，我是0号屏幕</h1>

		</div>

		<div class="page page1">

			<h1>你好，我是1号屏幕</h1>

			<!-- <img class="no1" src="img/1.png" />

			<img class="no2" src="img/2.png" /> -->

		</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>

	<img  class="xiangxiatishi" src="img/prompt.png" alt="向下来一下~"/>

</body>

　　

$(document).ready(

			function() {

				var nowpage = 0;

				//给最大的盒子增加事件监听

				$(".container").swipe(

					{

						swipe:function(event, direction, distance, duration, fingerCount) {

							 if(direction == "up"){

							 	nowpage = nowpage + 1;

							 }else if(direction == "down"){

							 	nowpage = nowpage - 1;

							 }

							 if(nowpage > 4){

							 	nowpage = 4;

							 }

							 if(nowpage < 0){

							 	nowpage = 0;

							 }

							$(".container").animate({"top":nowpage * -100 + "%"},400);

							$(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur");

						}

					}

				);

			}

		);

　　

利用jquery.touchSwipe.js实现的移动滑屏效果。的更多相关文章

  1. 利用轮播原理结合hammer.js实现简洁的滑屏功能

    最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...

  2. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  3. 利用jquery.form.js实现将form提交转为ajax方式提交的方法（带上传的表单提交）

    提供一种方法就是利用jquery.form.js. (1)这个框架集合form提交.验证.上传的功能. 核心方法 -- ajaxForm() 和 ajaxSubmit() $('#myForm').a ...

  4. js 利用jquery.gridly.js实现拖拽并且排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【NopCommerce 3.1】asp.net mvc 利用jQuery from.js上传用户头像

    纯代码不解释. 在CusotmerControllers中添加上传方法 /// <summary> /// ajax上传用户头像 /// </summary> /// < ...

  6. jquery.flexslider-min.js实现banner轮播图效果

    实现方法 引用jQuery和flexslider.js到你的页面 <script type="text/javascript" src="js/jquery-1.7 ...

  7. 利用jquery.fullPage.js 和 scrolloverflow.min.js 实现滚屏效果

    参考链接:https://blog.csdn.net/c11073138/article/details/79631036 /* 按着思路去search. */

  8. jQuery+fullPage.js演示10种全屏滚动

    基本演示 背景演示 循环演示 回调函数演示 绑定菜单演示 项目导航演示 自动滚动 slide自动滚动 响应式 下载地址 实例代码 <!DOCTYPE html> <html lang ...

  9. jQuery遮罩插件jQuery.blockUI.js简介

    利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...

随机推荐

  1. google 浏览器的调试模式

    1.电脑模式: 而在手机模式下的调试是:

  2. mysql中设置小数

    decimal Decimal(n,m)表示数值中共有n位数,其中整数n-m位,小数m位.例:decimal(10,6),数值中共有10位数,其中整数占4位,小数占6位. 例:decimal(2,1) ...

  3. [实战篇入门]02-POI简单创建Excel

    周日的小讲堂要讲到这里,趁中午时间写点东西,记录昨天晚上完成的东西,在这里只是简单的介绍如何创建对于样式问题,我不过多的说,因为之后的教程会使用模版方式搞定! 在学习这段代码的时候,希望各位访问Apa ...

  4. 东方14ACM小组 Challenge 11

    总时间限制:  10000ms 单个测试点时间限制:  1000ms 内存限制:  262144kB 描述 给一个长为N的数列,有M次操作,每次操作是以下两种之一: (1)修改数列中的一个数 (2)求 ...

  5. spoj COT2 - Count on a tree II

    COT2 - Count on a tree II http://www.spoj.com/problems/COT2/ #tree You are given a tree with N nodes ...

  6. Enterprise Architect 13 : 需求建模 自动命名并计数

    如何给模型中的需求元素配置计数器以自动设置新创建元素的名称和别名: Configure -> Settings -> Auto Names and Counters 设置好后的效果图:

  7. 希尔排序Shell sort

    希尔排序Shell Sort是基于插入排序的一种改进,同样分成两部分, 第一部分,希尔排序介绍 第二部分,如何选取关键字,选取关键字是希尔排序的关键 第一块希尔排序介绍 准备待排数组[6 2 4 1 ...

  8. RDLC - 后台代码直接导出Excel/PDF/Word格式

    最近做报表功能,用到了.net的报表组件rdlc. 其中有个功能就是后台代码直接输出Excel/PDF/Word格式的文件,网上看了些资源,做个总结: 参考地址 我直接贴出代码: //自动导出exce ...

  9. 【poj2947】高斯消元求解同模方程组【没有AC，存代码】

    题意: p start enda1,a2......ap (1<=ai<=n)第一行表示从星期start 到星期end 一共生产了p 件装饰物(工作的天数为end-start+1+7*x, ...

  10. 【NOIP】提高组2013 积木大赛

    [算法]找规律(听说还有写RMQ的www) [题解]ans+=(a[i]-a[i-1])  (i=1...n)(a[i]>a[i-1]) 后面比前面大k,说明要新叠加k个区间来达到所需高度.(看 ...