<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<title>横滚|竖滚</title>

<script type="text/javascript" src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>

<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>

<script type="text/javascript">

var myScroll;

var myScroll1, myScroll2, myScroll3;

function loaded() {

    var width = $(window).width();

    $('#wrapper,#div1,#div2,#div3').width(width);

    $('#scroller').width(width*3);

    $('#div1,#div2,#div3').height(($('#wrapper').height()));

    myScroll = new iScroll('wrapper', {

        hScrollbar: false,

        vScrollbar: false,

        snap: true,

        momentum: false,

        hScrollbar: false,

        onScrollEnd: function () {

            $('#nav li.active').removeClass('active');

            $('#nav li:eq('+this.currPageX+')').addClass('active');

        }

     });

    myScroll1 = new iScroll('div1', {hScrollbar: false,vScrollbar: false});

    myScroll2 = new iScroll('div2', {hScrollbar: false,vScrollbar: false});

    myScroll3 = new iScroll('div3', {hScrollbar: false,vScrollbar: false});

}

$(function(){

    $('#nav li').click(function(){

        myScroll.scrollToPage($(this).index());

    });

});

document.addEventListener('DOMContentLoaded', loaded, false);

</script>

<style type="text/css" media="all">

body,ul,li {

    padding:0;

    margin:0;

}

#wrapper {

    position: absolute;

    z-index: 1;

    top: 52px;

    bottom: 0px;

    left: 0;

    width: 100%;

    overflow: hidden;

}

#scroller {

    position:absolute;

    z-index:1;

    -webkit-tap-highlight-color:rgba(0,0,0,0);

    width:100%;

    padding:0;

}

#div1, #div2, #div3{

    float:left;

    height:100%;

}

#nav li{

    float:left;

    list-style-type:none;

    padding:0 20px;

}

#nav li.active{

    background-color:red

}

</style>

</head>

<body>

<ul id="nav">

    <li class="active">tab111111</li>

    <li>tab222222</li>

    <li>tab333333</li>

</ul>

<div id="wrapper">

    <div id="scroller">

        <div id="div1">

        <div id="scroller1">

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>1111111111111111111111111111</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>

        </div>

        </div>

        <div id="div2">

        <div id="scroller1">

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>2222222222222222222222222222</p>

        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>

        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>

        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>

        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>

        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>

        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>

        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>

        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>

        </div>

        </div>

        <div id="div3">

        <div id="scroller1">

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>3333333333333333333333333333</p>

        <p>cccccccccccccccccccccccc</p>

        <p>cccccccccccccccccccccccc</p>

        <p>cccccccccccccccccccccccc</p>

        <p>cccccccccccccccccccccccc</p>

        <p>cccccccccccccccccccccccc</p>

        <p>cccccccccccccccccccccccc</p>

        <p>cccccccccccccccccccccccc</p>

        <p>cccccccccccccccccccccccc</p>

        </div>

        </div>

    </div>

</div>

</body>

</html>

webapp利用iscroll实现同时横滚|竖滚的更多相关文章

  1. EF Core利用Transaction对数据进行回滚保护

    What? 首先,说一下什么是EF Core中的Transaction Transaction允许以原子方式处理多个数据库操作,如果事务已提交,则所有操作都应用于数据库,如果事务回滚,则没有任何操作应 ...

  2. 移动WebApp利用Chrome浏览器进行调试

    详细的请看这个(HBuilder是我长期使用,而且值得支持的国内前端开发编辑器) http://ask.dcloud.net.cn/article/151 http://ask.dcloud.net. ...

  3. 移动端利用iscroll实现小图变大图

    大图界面,使用iscroll,定义如下: var myScroll; function loaded(){ myScroll = new iScroll('wrapper', { zoom:true, ...

  4. 利用iscroll实现上拉加载下拉刷新

    1.首先引用isScroll插件 说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction ...

  5. 利用HBuilder打包Vue开发的webapp为app

    众所周知,前端开发完成的webapp只能运行在浏览器上,对运行环境有一定的限制,也就是除了浏览器其他的环境下不支持:那么现在如果有个需求是这样的呢?需要一套代码三端运行呢?三端运行(黑人脸??)是的, ...

  6. 用VC实现竖写汉字的方法

    中国人自古就有自右至左.从上到下书写汉字的习惯.而当我们在自己所编写的应用程序中使用输出函数输出的总是自左至右的横排文字.有没有可能在我们的应用程序中实现竖写汉字的效果呢?笔者偶然发现了一种利用VC实 ...

  7. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  8. 利用ant脚本 自动构建svn增量/全量 系统程序升级包

    首先请允许我这样说,作为开发或测试,你一定要具备这种 本领.你可以手动打包.部署你的工程,但这不是最好的方法.最好的方式就是全自动化的方式.开发人员提交了代码后,可以自动构建.打包.部署到测试环境. ...

  9. 使用iScroll实现上拉或者下拉刷新

    上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...

随机推荐

  1. msf客户端渗透（十）：社会工程学

    启动社会工程学攻击组件 生成二维码攻击模块 输入你想生成二维码的url,这里做演示用www.baidu.com 二维码生成后,在这个路径下 生成u盘,DVD的多媒体攻击载荷 通过修改autorun.i ...

  2. metasploit framework（六）：信息收集

    nmap 扫描 扫描完毕之后,hosts查看扫描的结果 auxiliary 扫描 使用arpsweep模块扫描 查看设置 设置网卡和目标IP 设置伪造的源IP和源MAC set SHOST <伪 ...

  3. 七、Builder 建造器模式

    需求:需要组装复杂结构的实例 代码清单: Builder 接口: public abstract class Builder { public abstract void makeTitle(Stri ...

  4. laravel 自定义常量的方法

    注意:laravel版本为5.1  第一种方法 在本地可以用 我上传到服务器发现用不了  有待解决 第二种方法  在本地可以用 上传服务器后 要把 constants.php   文件权限改为 755 ...

  5. Windows Server2012 R2 安装.NET Framework 3.5失败解决方法

    转载:https://blog.csdn.net/F12138_/article/details/80220698 显示需要指定备用路径,但我没有指定 然后就出现了的失败T T! 由于我无法访问安装盘 ...

  6. centos 7.3+nginx+jira(.bin)+mysql

    JIRA 安装参考资料 http://www.cnblogs.com/ilanni/p/6200875.html 注意服务启动与关闭 service jira stop service jira st ...

  7. pta6-15（双端循环队列）

    题目链接:https://pintia.cn/problem-sets/1101307589335527424/problems/1101313244863737856 题意:实现双段队列的队首出队. ...

  8. Cisco无线AP上联口为trunk时无法注册故障处理

    网络环境:WLC5520  AP:1832i-h-k9 客户实施过程中电话告知其将AP和交换机互联的端口类型设置为TRUNK口后,AP无法注册到WLC上,后经过查看配置发现客户用于AP管理的VLAN为 ...

  9. Codeforces Beta Round #70 (Div. 2)

    Codeforces Beta Round #70 (Div. 2) http://codeforces.com/contest/78 A #include<bits/stdc++.h> ...

  10. python中if not x: 和 if x is not None: 和 if not x is None的使用和区别

    代码中经常会有变量是否为None的判断,有三种主要的写法: 第一种是`if x is None`: 第二种是 `if not x:`: 第三种是`if not x is None`(这句这样理解更清晰 ...