要引入两个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. 解决用ASP.NET下载文件时,文件名为乱码的问题

    关键就一句:                    string strTemp = System.Web.HttpUtility.UrlEncode(strName, System.Text.Enc ...

  2. mysql的二级索引

    mysql中每个表都有一个聚簇索引(clustered index ),除此之外的表上的每个非聚簇索引都是二级索引,又叫辅助索引(secondary indexes). 以InnoDB来说,每个Inn ...

  3. java_字符

    例一:数据类型转换 package javaweb1200; public class 字符就是数字吗 { public static void main(String[] args) { Syste ...

  4. java.lang.ClassNotFoundException: com.servlet.HandlesearchclassesServlet

    错误的原因: 原来命名为Handlesearchclasses导致与系统预留字冲突, 导致servlet找不到,出现404错误, 因此该变类名和web.xml里面的配置文件即可.

  5. [未完成][Mooc]关于IO总结

    整个课程的大纲:1.编码问题.2.File类的使用3.RandomAccessFile的使用4.字节流的使用.5.字符流的使用.6.对象的序列化和反序列化. 视频1:文件的编码Eclipse的一大特点 ...

  6. CF 19D - Points 线段树套平衡树

    题目在这: 给出三种操作: 1.增加点(x,y) 2.删除点(x,y) 3.询问在点(x,y)右上方的点,如果有相同,输出最左边的,如果还有相同,输出最低的那个点 分析: 线段树套平衡树. 我们先离散 ...

  7. Ionic条码扫描

    http://m.blog.csdn.net/article/details?id=45843819

  8. Spring(3.2.3) - Beans(4): p-namespace & c-namespace

    p 命名空间 p 命名空间允许你使用 bean 元素的属性而不是 <property/>子元素来描述 Bean 实例的属性值.从 Spring2.0 开始,Spring 支持基于 XML ...

  9. Linux 命令 - wc: 统计文件的行数、字数和字节数

    命令格式 wc [OPTION]... [FILE]... 命令格式 -c, --bytes 打印字节数. -m, --chars 打印字符数. -l, --lines 打印行数. -L, --max ...

  10. winform 渐变（非API）

    public FrmMain() { InitializeComponent(); //窗体显示特效 Opacity = 0.0; //窗体透明度为0 fadeTimer.Start(); //计时开 ...