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 ...
随机推荐
- SEO在网页制作中的应用
1.什么是SEOSEO(Search Engine Optimization)中文意译为“搜索引擎优化”.SEO是指通过网站内部调整优化及站外优化,使网站满足搜索引擎收录排名需求,在搜索引擎中提高关键 ...
- usb驱动开发8之配置描述符
前面分析了usb的四大描述符之端点描述符,接口描述符(每一个接口对应一个功能,与之配备相应驱动),下面是看配置描述符还是看设备描述符呢??我们知道,设备大于配置,配置大于接口,接口可以有多种设置. 我 ...
- C语言 百炼成钢11
//题目31:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续 //判断第二个字母. #define _CRT_SECURE_NO_WARNINGS #include<st ...
- 本地环境，Ecshop安装教程
最近有个项目需要用ECshop来做,之前没接触过ECshop,今天去网上找了下安装教程,现在发出来分享一下. 1. ecshop网店系统最新版本是ECSHOP V2.7.3,去官网下载utf8和gbk ...
- .NET面试题解析(07)-多线程编程与线程同步 (转)
http://www.cnblogs.com/anding/p/5301754.html 系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 关于线程的知识点其实 ...
- HoloLens开发手记 - Unity之Persistence 场景保持
Persistence 场景保持是HoloLens全息体验的一个关键特性,当用户离开原场景中时,原场景中全息对象会保持在特定位置,当用户回到原场景时,能够准确还原原场景的全息内容.WorldAncho ...
- [poj3046]Ant Counting(母函数)
题意: S<=x1+x2+...+xT<=B 0<=x1<=N1 0<=x2<=N2 ... 0<=xT<=NT 求这个不等式方程组的解的个数. 分析: ...
- 那天有个小孩跟我说LINQ（八）学会Func
文章已经迁移到:http://www.ayjs.net/2013/08/68/ 文章已经迁移到:http://www.ayjs.net/2013/08/68/ 文章已经迁移到:http://www.a ...
- WCF入门 （13）
前言 公司略无聊,周三前同事推荐跳槽,于是会去更新了一下简历,突然发现,快一年了,我竟然想不出我可以往简历上添加点什么值得自豪的东西.下午和小伙伴聊了一会天,他告诉我,可以往简历上写上“英语口语水平有 ...
- 小记：Quartz 当 Job 执行时间超过触发间隔时间时所发生的情况
一个普通的 Job 实现如下: public class Job1 : IJob { public void Execute(IJobExecutionContext context) { Conso ...