要引入两个jquery插件 可以去网上下载

<script src="jquery-1.11.1.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>

代码如下：

<!DOCTYPE html >

<html >
<head>
<meta 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>jquery.touchSwipe 手机上下滑屏特效代码</title>
<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; line-height:50px; display:block}
.container .page0 { background-color: blue; }
.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 class="page page0 cur">
<h1>你好，我是0号屏幕，第一屏,鼠标单击向下拖动</h1>
</div>
<div class="page page1">
<h1>你好，我是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>
<script src="jquery-1.11.1.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script>
$(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");
}
}
);
}
);
</script>
<!--代码部分end-->

</body>
</html>

Jquery实现手机上下滑屏滑动的特效代码的更多相关文章

  1. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. 一款jQuery仿海尔官网全屏焦点图特效代码

    一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...

  3. jQuery旋转木马仿3D效果的图片切换特效代码

    用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...

  4. (转) 实现wince datagrid 上下滑屏数据浏览

    开发 基于wince 手持设备数据库应用时 由于是触摸屏 当datagrid 数据过多 往往用户烦于去控制又窄又细的上下滚动条 尤其是高分辨率的屏上 (如魅族M8系统 720×480) 而且datag ...

  5. Qt for Android（一）Qt在Android手机上全屏显示

    1.在程序的编译路径下找到AndroidManifest.xml文件,具体路径如下: 2.在pro文件中添加一句话: ANDROID_PACKAGE_SOURCE_DIR = $$PWD/Androi ...

  6. 一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器

    基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...

  7. jquery 地址栏链接与a标签链接匹配 特效代码总结（二）

    如题所述,当出现这样的功能,点击某个链接后,给跳转后的该链接地址添加样式,通过添加class为current来增加特殊样式. 如图所示:点击HTML+css3跳转后,给其添加如图样式: js代码如下: ...

  8. 基于HTML5全屏图文左右滑动切换特效

    基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <main> & ...

  9. 朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现

    翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 ...

随机推荐

  1. MPEG简介 + 如何计算CBR 和VBR的MP3的播放时间

    1. 声明本文所写内容,多数整理自互联网,版权归原作者所有笔者知识有限,文中难免有误,欢迎批评指正,admin (at) crifan.com觉得此文对你有帮助,想要发邮件来感谢的,也欢迎哈,^_^欢 ...

  2. Linux命令之hwclock

    转载:http://codingstandards.iteye.com/blog/804830 用途说明 hwclock命令,与clock命令是同一个命令,主要用来查询和设置硬件时钟(query an ...

  3. STM32W108芯片的SWD在IAR7.30版本中不能用

    提示说0x20000B8不能读,When Clear soft RAM BP

  4. 实验-hadoop开发环境部署

    hadoop-0.20.2自带了eclipse插件,比如1.0.0和2.2.0就没有 1.windows下 1)把插件hadoop-0.20.2-eclipse-plugin.jar复制到eclips ...

  5. 1. Android 系统上一款开源的图表库

    1. MPAndroidChart  MPAndroidChart 是 Android 系统上一款开源的图表库.目前提供线图和饼图,支持选择.缩放和拖放. 一个可以拖动缩放的图表库,包含曲线图.直方图 ...

  6. javascript oop深入学习笔记（一）

    一.定义和实例化一个类: 在OOP的思想中,类是一个很重要的元素,一个类表示了具有相似的一类事物的抽象,通过实例化一个类,可以获得属于该类的一个实例,我们也可以称之为对象. 在javascript中, ...

  7. iOS 生成本地验证码

    在应用程序注册.登陆或者有关支付确认的界面,经常会用到验证码,验证码有的是通过手机发送获取的,有的是在本地点击获取的,通过手机发送获取的动态验证码可以使用第三方类库实现,本地点击获取的是在本地自己绘制 ...

  8. linux - 文本处理 及 正则表达式

    先新建一个文件,并写入一些东西,方便测试, 从passwd里复制几行吧 $ /etc/passwd > passwd t$ ll 总用量 drwxrwxr-x huanghao huanghao ...

  9. [改善Java代码]Java的泛型是类型擦除的

    泛型可以减少强制类型的转换,可规范集合的元素类型,还可以提高代码的安全性和可读性,正是因为有了这些优点,自从Java引入泛型之后,项目的编码规则上便多了一条,优先使用泛型. Java泛型(Generi ...

  10. Ajax返回xml类型数据

    ajax可以返回文本类型数据和xml类型数据,xml是计算机通用语言 可以使用js解析返回xml类型数据的dom对象 前端页面 <!doctype html> <html lang= ...