要引入两个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. Python的基础--对象 转

      对象(Objects)是python中数据的抽象,python中所有的数据均可以用对象或者是对象之间的关系来表示.每个对象均有标识符(identity).类型(type).值(value). 标识 ...

  2. Linux下vim配置详解

    转自http://www.cnblogs.com/witcxc/archive/2011/12/28/2304704.html

  3. du 和 df命令的区别（超赞）

    du和df命令都被用于获得文件系统大小的信息:df用于报告文件系统的总块数及剩余块数,du -s /<filesystem>用于报告文件系统使用的块数.但是,我们可以发现从df命令算出的文 ...

  4. 《C和指针》之ANSI C标准输入输出函数

    一.I/O流操作一般流程: (1)为每一个要打开的文件定义一个FILE *类型的指针变量,这个指针变量将指向I/O流使用的FILE结构体. (2)使用fopen函数打开I/O流.要打开一个I/O流,必 ...

  5. 使用GPS经纬度定位附近地点(某一点范围内查询)

    需要手机查找附近N米以内的商户,致想法是已知一个中心点,一个半径,求圆包含于圆抛物线里所有的点,经纬度是一个点,半径是一个距离,不能直接加减,下面提供C#的解决方法 数据库中记录了商家在百度标注的经纬 ...

  6. 移动终端学习2：触屏原生js事件及重力感应

    如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...

  7. 《sift算法详解》阅读笔记

    原博客来自:http://blog.csdn.net/zddblog/article/details/7521424 定义: 尺度不变特征转化是一种计算机视觉算法,用于侦测和描述物体的局部性特征,在空 ...

  8. “Request Entity Too Large” 上传图片出现大小限制

    昨天公司安卓app上传了图片爆了下面这个错误 <"-//IETF//DTD HTML 2.0//EN"> <html><head> <ti ...

  9. 【推理，贪心】UVa 1319 - Maximum

    看到了大神的代码.理解了好久...真是差距. 题意:给出m, p, a, b,然后xi满足已下两个公式, 求 xp1 + xp2 +...+ xpm 的最大值. 1.-1/sqrt(a) <= ...

  10. poj 3692 二分图最大匹配

    思路: 如果我们将认识的建边,求最大独立集就是互相不认识的人数.那么我们反过来,将不认识的建图,求最大独立集就是互相认识的人数. #include<cstdio> #include< ...