<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
   <script src="js/jquery-1.11.0.min.js"></script>
   <script src="js/jquery.touchSwipe.min.js"></script>
    <style>
        #screen1{
            background-color: #ddd;
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        #screen2{
            display: none;
            position: absolute;
            background-color: pink;
            width: 100%;
            height: 100%;
        }
        #screen3{
            display: none;
            position: absolute;
            background-color: #00f;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body id="orientation">
    <div class="screen1" id="screen1" >

    </div>
    <div class="screen2" id="screen2">

    </div>
    <div class="screen3" id="screen3" >

    </div>
    <script>
        $(function () {
            function switcher(id, nextid, xiaid) {
                $(id).swipe({
                            swipe: function (event, direction, distance, duration, fingerCount) {
                                if (direction == "up") {
                                    $(nextid).show();
                                    $(this).hide();
                                }
                                else if (direction == "down") {
                                    $(xiaid).show();
                                    $(this).hide();
                                }
                            }
                        }
                );
            }
            $("#screen1").swipe({
                        swipe: function (event, direction, distance, duration, fingerCount) {
                            if (direction == "up") {
                                $("#screen2").show();
                                $("#screen1").hide();
                            }
                        }
                    }
            )
            switcher("#screen2", "#screen3", "#screen1");
            $("#screen3").swipe({
                        swipe: function (event, direction, distance, duration, fingerCount) {
                            if (direction == "down") {
                                $("#screen3").hide();
                                $("#screen2").show();
                            }
                        }
                    }
            );
        });
    </script>
</body>
</html>
<script>
   var c = "http://oss.tunji99.com/tunji-dev/20191107/14d11fa494a947539606aa9b94ddf818.png!q_max3,http://oss.tunji99.com/tunji-dev/20191107/14d11fa494a947539606aa9b94ddf818.png!q_max3,";
   var e = c.search("http://oss.tunji99.com/tunji-dev/20191107/14d11fa494a947539606aa9b94ddf818.png!q_max3,","");
   console.log(e);
</script>

bootstrap 上下页滚动的更多相关文章

  1. One Page Scroll – 实现苹果风格的单页滚动效果

    单页滚动网站已经被广泛使用了有一段时间了,它们对于快速提供信息是很有用的.One Page Scroll 是一个 jQuery 插件,简化了创建此类网站的步骤,只需创建 HTML 结构,进行简单设置, ...

  2. Bootstrap 标签页（Tab）插件

    摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...

  3. 第二百四十五节，Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  4. 第二百四十节，Bootstrap巨幕页头缩略图和警告框组件

    Bootstrap巨幕页头缩略图和警告框组件 学习要点: 1.巨幕组件 2.页头组件 3.缩略图组件 4.警告框组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:巨幕组件.页头组件.缩 ...

  5. bootstrap 翻页的状态

    翻页的状态 下面的实例演示了上表中所讨论的 class .disabled 的用法: <!DOCTYPE html><html><head><meta htt ...

  6. bootstrap 翻页(对齐的链接)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Laya List翻页滚动方案 & List滚动源码解析

    Laya List翻页滚动方案 & List滚动源码解析 @author ixenos 2019-03-29 1.List翻页滚动方案 /** * 计算下一页的起始索引, 不足时补足 * @p ...

  8. bootstrap课程12 滚动监听如何实现（bootstrap方式和自定义方式）

    bootstrap课程12 滚动监听如何实现(bootstrap方式和自定义方式) 一.总结 一句话总结:通过监听滚动的高,判断滚动的高是否大于元素距离顶端的距离 1.如何知道屏幕滚动的高? st=$ ...

  9. Bootstrap 标签页和工具提示插件

    一．标签页 标签页也就是通常所说的选项卡功能. //基本用法 <ul class="nav nav-tabs"> <li class="active&q ...

随机推荐

  1. linux之mariadb的安装

    1.概述 mysql为关系型数据库. mysql的分支-- mysql (自己本身) -- 2008前后的被SUN收购 SUN之后又被oracle收购 系统集成--什么都干(- 套解决方案) mari ...

  2. Win7升级Win10系统提示错误0x80070057的解决方法

    Win7系统用户在通过Windows Update来升级Win10系统时,有时会出现0x80070057的错误代码从而导致无法继续升级.下面好系统重装助手就来告诉大家Win7升级Win10系统出现0x ...

  3. 8.vue-resource 数据请求基本实现

    1.vue-resource 实现 get, post, jsonp请求:https://github.com/pagekit/vue-resource 注意: 除了 vue-resource 实现数 ...

  4. 【转】优秀的Go开源项目

    http://www.mhtclub.com/post/60   目录 优秀的Go开源项目 中文Go语言学习教程 国外的Go语言教程 openbilibili源码 Go作为Google2009年推出的 ...

  5. 《流畅的Python》Data Structures--第2章序列array

    第二部分 Data Structure Chapter2 An Array of Sequences Chapter3 Dictionaries and Sets Chapter4 Text vers ...

  6. JAVA遇见HTML——JSP篇:JavaBeans

    Javabeans简介 Javabeans就是符合某种特定的规范的java类.使用Javabeans的好处是解决代码重复编写,减少代码冗余,功能区分明确,提高了代码的维护性. Javabean的设计原 ...

  7. python通用分页功能

    实现: class Page: def __init__(self,current_page,data_count,per_page_count=10,pager_num=10): self.curr ...

  8. [git]用户名，邮箱

    1.查看当前的用户名,邮箱 git config user.name git config user.email 2. 修改当前用户名,邮箱 git config --global user.name ...

  9. cursor: hand和cursor:pointer的区别

    cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标变成手行. cursor:hand :IE完全支持.但是在firefox是不支持的,没有效果. cu ...

  10. js特殊字符的验证

    // 特殊字符的验证 // 包含特殊字符返回true,不包含特殊字符返回false function checkEspcial(s) { var str=trim(s); //var reg=/< ...