<!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. C++ 容器一图以蔽之

    读完C++ primary 容器相关章节,有必要总结一下容器的要点,一图说明. 其中的问题,以下是我的一些想法,欢迎交流. 问题1. STL源码剖析 · vector 问题2. STL源码剖析 · R ...

  2. 阿里高级架构师教你使用Spring JMS处理消息事务源码案例

    消费者在接收JMS异步消息的过程中会发生执行错误,这可能会导致信息的丢失.该源码展示如何使用本地事务解决这个问题.这种解决方案可能会导致在某些情况下消息的重复(例如,当它会将信息储存到数据库,然后监听 ...

  3. EtherNet/IP 协议应用层使用CIP协议&CIP协议中使用的TLS和DTLS（Network Infrastructure for EtherNet/IPTM: Introduction and Considerations）

  4. smart_ptr之shared_ptr

    智能指针的概念 c++11标准和boost都提供了智能指针的功能.智能指针是普通指针的封装,智能指针是一个对象,对象里面包含了原生指针.可以使用智能指针对象的get()方法可获得封装在里面的原生指针. ...

  5. JVM之Java运行时数据区(线程隔离区)

    来源 JVM会在会在执行Java程序过程中把所管理的内存划分为若干区域,主要包括程序计数器(Program Counter Register),虚拟机栈(VM Stack),本地方法栈(Native ...

  6. django加载本地html

    django加载本地html from django.shortcuts import render from django.http import HttpResponse from django. ...

  7. IIS上传限制大小

    加入下面的配置即可 <?xml version="1.0" encoding="UTF-8"?> <configuration> < ...

  8. 第四章 深入C#的string类

    一.String 类的常用方法 1.indexOf(); 获取指定字符串的位置,如果没有则返回-1 2.SubString();    截取字符串,参数1代表开始位置,参数2代表截取长度 3.ToLo ...

  9. 出现错误时返回异常 MVC

    在使用MVC的时候,会出现异常提醒: 1,当在Controller出现错误的时候,我们可以直接返回,即return  view()返回视图. ViewBag.Msg("产品或赠品不存在&qu ...

  10. 查找、AVL树、散列表

    插值查找是二分查找的改进,斐波那契查找是插值查找的改进. 二分查找:mid=(low+high)/  2 插值查找:mid=(key-a[low])*(high-low)/  (a[high]-a[l ...