jquery插件实现上下滑动翻页效果
<!DOCTYPE >
<meta charset="utf-8" />
<head>
<title>测试jquery</title>
<script src="jquery.js"></script>
<script src="swipe.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
</head>
<style type="text/css">
#div1{
background-color: red;
width:100%;
height: 100%;
display: block;
top:-100%;
position: fixed;
}
#div2{
background-color: blue;
width: 100%;
height: 100%;
display: block;
top:100%;
position:fixed;
}
#div3{
background-color: yellow;
width: 100%;
height: 100%;
display: block;
top: 100%;
position: fixed;
}
#div4{
background-color:green;
width: 100%;
height: 100%;
display: block;
position:fixed;
top: 100%;
}
</style>
<body>
<div id="div0">
<div id="div1">我是第一页</div>
<div id="div2">我是第二页</div>
<div id="div3">我是第三页</div>
<div id="div4">我是第四页</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var nowpage=1;
load1();
function load1(){
$("#div1").animate(
{top:"0%"},200
);
}
function move1(){
$("#div1").animate(
{top:"-100%"},200
);
}
function load2(){
$("#div2").animate({
top:"0%"
},200);
}
function move2to1() {
$("#div2").animate({
top: "100%"
}, 200);
};
function move2to3() {
$("#div2").animate({
top: "-100%"
}, 200);
};
function load3() {
$("#div3").animate({
top: "0%"
}, 200);
};
function move3() {
$("#div3").animate({
top: "100%"
}, 200);
};
function move3to4() {
$("#div3").animate({
top: "-100%"
}, 300);
};
function load4() {
$("#div4").animate({
top: "0%"
},300);
};
function move4() {
$("#div4").animate({
top: "100%"
}, 300);
};
$("#div0").swipe({
swipe: function(event, direction, distance, duration, fingerCount) {
if (direction == "up") {
nowpage = nowpage + 1;
if (nowpage == 2) {
move1();
load2();
}
if (nowpage == 3) {
move2to3();
load3();
} if(nowpage==4){
move3to4();
load4();
}
} else if (direction == "down") {
nowpage = nowpage - 1;
if (nowpage == 1) { move2to1();
load1();
}
if (nowpage == 2) { move3();
load2();
}
if (nowpage == 3) { move4();
load3();
}
}
if (nowpage > 4) {
nowpage = 4;
}
if (nowpage < 0) {
nowpage = 0;
}
}
});
});
</script>
jquery插件实现上下滑动翻页效果的更多相关文章
- 基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
- 微信里经常看到的滑动翻页效果，slide
上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大 ...
- ViewPager实现滑动翻页效果
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
- 桌面浏览器实现滑动翻页效果(Swiper)
还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chin ...
- vue案例 - vue-awesome-swiper实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
- jQuery中turn.js（翻页效果）学习笔记
Turn.js是一个内置的jQuery翻页插件1 html中引入<script type="text/javascript" src="js/turn.js&quo ...
- 转载 vue-awesome-swiper - 基于vue实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
- jQuery垂直缩略图相册插件 支持鼠标滑动翻页
在线演示 本地下载
- js实现移动端手指左右上下滑动翻页效果
var ele = document.getElementsByClassName("img-box")[0]; var beginX, beginY, endX, endY, s ...
随机推荐
- Java构建
大部分Java项目都是相似的,使用Gradle插件,能够抽象出这些步骤,这样就不必为每个Java项目都编写Gradle的project和task了 引入java插件 apply plugin: 'ja ...
- [转]基于四叉树（QuadTree）的LOD地形实现
实现基于四叉树的LOD地形时,我遇到的主要问题是如何修补地形裂缝. 本段我将描述使用LOD地形的优势,我实现LOD地形的思路,实现LOD地形核心模块的详细过程,以及修补地形裂缝的思路. 首先,LOD地 ...
- C#获取枚举描述代码
public class MusterEnum { /// 获取枚举的描述信息 /// </summary> /// <param name="e">传入枚 ...
- HTML5 文件异步上传 — h5uploader.js
原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...
- Opencv step by step - 图像载入
之前已经使用过图像载入了,这里再讲述一下其他的一些tip. 先来一次普通的载入: #include <cv.h> #include <highgui.h> int main(i ...
- 关于一个每天请求50W次接口的设计实现过程
从大学开始关注博客园,到工作之后注册了博客园账号,直至今日终于能够静下心来将自己个人的所学,所得,所悟能够分享出来与大家分享,好开心~ 言归正传,需求背景是博主所在的公司为一个在线OTA公司,客户端上 ...
- Node服务一键离线部署
背景说明 项目测试通过,到了上线部署阶段.部署的机器安全限制比较严格,不允许访问外网.此外,没有对外网开放ssh服务,无法通过ssh远程操作. 针对上面提到的两条限制条件,通过下面方式解决: 无法访问 ...
- 解决SourceGrid在某些系统上无法用鼠标滚轮滚动的问题
4.40版源码,找到SourceGrid/SourceGrid/Common/CustomScrollControl.cs 这个文件 定位 CustomScrollWheel() 方法,把if条件判断 ...
- 通过Ajax——异步获取相关问题解答
问题呈现: 解决方案: dataType定义的是接收的值的类型,及controller控制器返回什么类型的值,这就写成什么类型, 我写的是return content("...") ...
- myeclipse自动import
不管包什么的 直接把代码全写出来 再按 ctrl + shift +o 这是自动导包的 前提是你写的代码是正确的