HTML
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

    <meta content="telephone=no" name="format-detection" />

    <meta name="description" content="" />

    <meta name="keywords" content="" />

    <title>demo - pageSlider</title>

    <link href="../../Script/plugins/pageSlider1.0/pageSlider.css" rel="stylesheet" />

</head>

<body>

    <div class="section sec1" style="background-color:#FFCCCC;">1 移动端中向下滑动<div class="to-form-link"><a href="http://www.baidu.com">我是链接</a></div></div>

    <div class="section sec2" style="background-color:#4ACBF7;">2</div>

    <div class="section sec3" style="background-color:#63E339;">3</div>

    <div class="section sec4" style="background-color:#F7D34A;">4</div>

    <div class="section sec5" style="background-color:#FF8ECE;">5</div>

    <div class="section sec6" style="background-color:#ACDCED;">6</div>

    <script src="../../Script/plugins/pageSlider1.0/zepto-1.1.4.js"></script>

    <script src="../../Script/plugins/pageSlider1.0/pageSlider1.0.js"></script>

    <script>

        var pageSlider = PageSlider.case();

        //a标签无法触发跳转的问题用以下代码

        $(".to-form-link>a").on('touchend', function () {

            location.replace($(this).attr("href"));

        });

    </script>

</body>

</html>

pageSlider1.0下载

JQuery 移动端 上下 滑动 切换 插件 pageSlider的更多相关文章

  1. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  2. FlexSlider是一个非常出色的jQuery滑动切换插件

    FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...

  3. jQuery 写的幻灯左右切换插件

    <html> <head> <meta charset="utf-8"> <title>官网</title> <s ...

  4. jquery全屏图片滑动切换

    在线演示 本地下载

  5. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  6. jQuery banner切换插件

    今天学写了一个基于jQuery焦点图切换插件,有不对的地方还请多多指教,不多说下面是代码: 1.引jQuery库 <script src="http://code.jquery.com ...

  7. 移动端tab滑动和上下拉刷新加载

    移动端tab滑动和上下拉刷新加载 查看demo(请在移动端模式下查看) 查看代码 开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我 ...

  8. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  9. 移动端网站的内容触摸滑动-Swiper插件

    手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...

随机推荐

  1. 如何在IntelliJ Idea中同时启动不同端口的两个实例

    在SpringCloud开发过程中需要在一个项目中启用不同的端口,我使用的工具是IDEA 步骤1 创建SpringBoot工程 步骤2 在配置文件中添加如下配置: spring.application ...

  2. MyBatis Generator 超详细配置

    想快速开始,请直接拉到最后,看整体配置. MyBatis Generator 是 MyBatis 提供的一个代码生成工具.可以帮我们生成 表对应的持久化对象(po).操作数据库的接口(dao).CRU ...

  3. 【转载】Mapreduce实现自定义的InputFormat

    转自:http://www.cnblogs.com/dlutxm/archive/2011/09/30/2196653.html 在mapreduce程序运行的开始阶段,hadoop需要将待处理的输入 ...

  4. ASP.NET Core Web API中实现全局异常捕获与处理

    处理全局异常 HANDLING ERRORS GLOBALLY 在上面的示例中,我们的 action 内部有一个 try-catch 代码块.这一点很重要,我们需要在我们的 action 方法体中处理 ...

  5. 【做题笔记】P1090 合并果子

    题目大意:给定 \(n\) 个数,每次可以任意选两个数 \(a_i,a_j\) 相加,把相加的结果作为一个新数继续执行此操作,直到只剩一个数为止.现要求使最后得出的这个数最小. 一个显然的贪心策略:每 ...

  6. 更改mysql数据库默认的字符集（编码方式）

    mysql数据库的默认编码方式是latin1, 在mysql中存储和显示中文时会产生乱码,必须要更改默认的编码方式为utf8 或 gbk.(以下以gbk为例.) 更改服务器的编码方式,在终端输入以下命 ...

  7. Codeforces Round #624 (Div. 3) D. Three Integers

    You are given three integers a≤b≤ca≤b≤c . In one move, you can add +1+1 or −1−1 to any of these inte ...

  8. CPI和PPI，谁代表了通膨？

    CPI.PPI 一则旧闻,根据 2016年1月9日 统计局公布的数据,CPI同比增长1.6%,PPI同比下降5.9%. Consumer Price Index 缩写CPI,居民消费价格指数. 统计范 ...

  9. linux 磁盘100% 清理

    df -h  查看磁盘使用有一个vdb满了 df   -i 查看inode 使用率 显示文件大小: du -sh /* du参数: -a : 列出所有的文件与目录容量,因为默认仅统计目录下面的文件量而 ...

  10. 读书笔记 - 把时间当作朋友 by 李笑来

    要管理的不是时间,而是自己. 摸着石头渐行渐远,最终也能过河.- 朱敏 赛伯乐(中国)投资公司 董事长 一切都靠积累,一切都可提前准备,越早醒悟越好.人的一生是奋斗的一生,但是有的人一生过得很伟大,有 ...