利用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. CodeVS 1017 DP

    1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描 ...

  2. You can't specify target table 'table' for update in FROM clause

    delete from table1 where ID not in(select max(ID) ID from table1 group by row1) and row1 ) # 出现错误 # ...

  3. LightOJ 1321 - Sending Packets 简单最短路+期望

    http://www.lightoj.com/volume_showproblem.php?problem=1321 题意:每条边都有概率无法经过,但可以重新尝试,现给出成功率,传输次数和传输时间,求 ...

  4. II8部署WCF服务出错

    环境:Windows 2012 R2 + IIS 8.0 + .NET 4.5 错误404.3 - Not Found: 控制面板->程序->启用或关闭Windows功能,如下图所示,将需 ...

  5. c# delegate知识

    一.引用方法 委托是寻址方法的.NET版本.委托是类型安全的类,它定义了返回类型和参数的类型.委托是对方法的引用,也可以对多个方法进行引用,委托可以理解为指向方法地址的指针. 如:delegate i ...

  6. .NET RabbitMQ

    在企业应用系统领域,会面对不同系统之间的通信.集成与整合,尤其当面临异构系统时,这 种分布式的调用与通信变得越发重要.其次,系统中一般会有很多对实时性要求不高的但是执行起来比较较耗时的地方,比如发送短 ...

  7. 【NOIP】2013提高组 花匠(摆花)

    [算法]DP||贪心 [题解] (1)动态规划: 令f[i][0..1]为两种条件下前i株花的最大保留数量,状态转移方程: f[i][0]=max(f[j][1]+1) (j=i-1...1)(h[i ...

  8. 【HNOI】trust 弦图最大独立集

    [题目描述]有n个人,每个人之间都有是否信任的关系,要求找出k个人,使得k个人之间彼此信任,且k最大,保证不信任的关系由多个三元环组成,且三元环之间只可能有公共点,没有公共边,且不存在任意一个节点不属 ...

  9. 为什么Javascript有设计缺陷

    1. 设计阶段过于仓促 Javascript的设计,其实只用了十天.而且,设计师是为了向公司交差,本人并不愿意这样设计(参见<Javascript诞生记>). 另一方面,这种语言的设计初衷 ...

  10. Java中class的初始化顺序

     由于Java 中的一切东西都是对象,所以许多活动 变得更加简单,这个问题便是其中的一例. 除非真的需要代码,否则那个文件是不会载入的.通常,我们可认为除非那个类的一个对象构造完毕,  否则代码不会真 ...