1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>横滚|竖滚</title>
  9. <script type="text/javascript" src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>
  10. <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
  11. <script type="text/javascript">
  12. var myScroll;
  13. var myScroll1, myScroll2, myScroll3;
  14.  
  15. function loaded() {
  16.     var width = $(window).width();
  17.     $('#wrapper,#div1,#div2,#div3').width(width);
  18.     $('#scroller').width(width*3);
  19.     $('#div1,#div2,#div3').height(($('#wrapper').height()));
  20.  
  21.     myScroll = new iScroll('wrapper', {
  22.         hScrollbar: false,
  23.         vScrollbar: false,
  24.         snap: true,
  25.         momentum: false,
  26.         hScrollbar: false,
  27.         onScrollEnd: function () {
  28.             $('#nav li.active').removeClass('active');
  29.             $('#nav li:eq('+this.currPageX+')').addClass('active');
  30.         }
  31.      });
  32.  
  33.     myScroll1 = new iScroll('div1', {hScrollbar: false,vScrollbar: false});
  34.     myScroll2 = new iScroll('div2', {hScrollbar: false,vScrollbar: false});
  35.     myScroll3 = new iScroll('div3', {hScrollbar: false,vScrollbar: false});
  36. }
  37. $(function(){
  38.     $('#nav li').click(function(){
  39.         myScroll.scrollToPage($(this).index());
  40.     });
  41. });
  42. document.addEventListener('DOMContentLoaded', loaded, false);
  43. </script>
  44.  
  45. <style type="text/css" media="all">
  46. body,ul,li {
  47.     padding:0;
  48.     margin:0;
  49. }
  50.  
  51. #wrapper {
  52.     position: absolute;
  53.     z-index: 1;
  54.     top: 52px;
  55.     bottom: 0px;
  56.     left: 0;
  57.     width: 100%;
  58.     overflow: hidden;
  59. }
  60.  
  61. #scroller {
  62.     position:absolute;
  63.     z-index:1;
  64.     -webkit-tap-highlight-color:rgba(0,0,0,0);
  65.     width:100%;
  66.     padding:0;
  67. }
  68.  
  69. #div1, #div2, #div3{
  70.     float:left;
  71.     height:100%;
  72. }
  73.  
  74. #nav li{
  75.     float:left;
  76.     list-style-type:none;
  77.     padding:0 20px;
  78. }
  79. #nav li.active{
  80.     background-color:red
  81. }
  82. </style>
  83. </head>
  84. <body>
  85. <ul id="nav">
  86.     <li class="active">tab111111</li>
  87.     <li>tab222222</li>
  88.     <li>tab333333</li>
  89. </ul>
  90. <div id="wrapper">
  91.     <div id="scroller">
  92.         <div id="div1">
  93.         <div id="scroller1">
  94.         <p>1111111111111111111111111111</p>
  95.         <p>1111111111111111111111111111</p>
  96.         <p>1111111111111111111111111111</p>
  97.         <p>1111111111111111111111111111</p>
  98.         <p>1111111111111111111111111111</p>
  99.         <p>1111111111111111111111111111</p>
  100.         <p>1111111111111111111111111111</p>
  101.         <p>1111111111111111111111111111</p>
  102.         <p>1111111111111111111111111111</p>
  103.         <p>1111111111111111111111111111</p>
  104.         <p>1111111111111111111111111111</p>
  105.         <p>1111111111111111111111111111</p>
  106.         <p>1111111111111111111111111111</p>
  107.         <p>1111111111111111111111111111</p>
  108.         <p>1111111111111111111111111111</p>
  109.         <p>1111111111111111111111111111</p>
  110.         <p>1111111111111111111111111111</p>
  111.         <p>1111111111111111111111111111</p>
  112.         <p>1111111111111111111111111111</p>
  113.         <p>1111111111111111111111111111</p>
  114.         <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
  115.         <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
  116.         <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
  117.         <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
  118.         <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
  119.         <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
  120.         <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
  121.         <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
  122.         </div>
  123.         </div>
  124.  
  125.         <div id="div2">
  126.         <div id="scroller1">
  127.         <p>2222222222222222222222222222</p>
  128.         <p>2222222222222222222222222222</p>
  129.         <p>2222222222222222222222222222</p>
  130.         <p>2222222222222222222222222222</p>
  131.         <p>2222222222222222222222222222</p>
  132.         <p>2222222222222222222222222222</p>
  133.         <p>2222222222222222222222222222</p>
  134.         <p>2222222222222222222222222222</p>
  135.         <p>2222222222222222222222222222</p>
  136.         <p>2222222222222222222222222222</p>
  137.         <p>2222222222222222222222222222</p>
  138.         <p>2222222222222222222222222222</p>
  139.         <p>2222222222222222222222222222</p>
  140.         <p>2222222222222222222222222222</p>
  141.         <p>2222222222222222222222222222</p>
  142.         <p>2222222222222222222222222222</p>
  143.         <p>2222222222222222222222222222</p>
  144.         <p>2222222222222222222222222222</p>
  145.         <p>2222222222222222222222222222</p>
  146.         <p>2222222222222222222222222222</p>
  147.         <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
  148.         <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
  149.         <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
  150.         <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
  151.         <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
  152.         <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
  153.         <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
  154.         <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
  155.         </div>
  156.         </div>
  157.  
  158.         <div id="div3">
  159.         <div id="scroller1">
  160.         <p>3333333333333333333333333333</p>
  161.         <p>3333333333333333333333333333</p>
  162.         <p>3333333333333333333333333333</p>
  163.         <p>3333333333333333333333333333</p>
  164.         <p>3333333333333333333333333333</p>
  165.         <p>3333333333333333333333333333</p>
  166.         <p>3333333333333333333333333333</p>
  167.         <p>3333333333333333333333333333</p>
  168.         <p>3333333333333333333333333333</p>
  169.         <p>3333333333333333333333333333</p>
  170.         <p>3333333333333333333333333333</p>
  171.         <p>3333333333333333333333333333</p>
  172.         <p>3333333333333333333333333333</p>
  173.         <p>3333333333333333333333333333</p>
  174.         <p>3333333333333333333333333333</p>
  175.         <p>3333333333333333333333333333</p>
  176.         <p>3333333333333333333333333333</p>
  177.         <p>3333333333333333333333333333</p>
  178.         <p>3333333333333333333333333333</p>
  179.         <p>3333333333333333333333333333</p>
  180.         <p>cccccccccccccccccccccccc</p>
  181.         <p>cccccccccccccccccccccccc</p>
  182.         <p>cccccccccccccccccccccccc</p>
  183.         <p>cccccccccccccccccccccccc</p>
  184.         <p>cccccccccccccccccccccccc</p>
  185.         <p>cccccccccccccccccccccccc</p>
  186.         <p>cccccccccccccccccccccccc</p>
  187.         <p>cccccccccccccccccccccccc</p>
  188.         </div>
  189.         </div>
  190.     </div>
  191. </div>
  192. </body>
  193. </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. 申请ssl证书报提示caa提示

    申请ssl证书报下面提示caa提示,这和dns有关,换一组dns重新申请  send challenge err[acme error 'urn:acme:error:connection': DNS ...

  2. java执行jar包出错：Unable to access jarfile

    java执行jar包出错:Unable to access jarfile 错误的原因有多种: 1.一般都是路径不正确.在Windows中,正确的路径类似于: java -jar "D:\W ...

  3. poj3104（二分）

    题目链接:http://poj.org/problem?id=3104 题意:有n件衣服,每一件含有a[i]单位的水,每分钟衣服可以自然蒸发1单位的水,也可以在烘干器上每分钟烘干k单位的水,问将所有衣 ...

  4. 优化-最小化损失函数的三种主要方法：梯度下降(BGD)、随机梯度下降(SGD)、mini-batch SGD

    优化函数 损失函数 BGD 我们平时说的梯度现将也叫做最速梯度下降,也叫做批量梯度下降(Batch Gradient Descent). 对目标(损失)函数求导 沿导数相反方向移动参数 在梯度下降中, ...

  5. Mac电脑Dock栏开启放大特效

    1 右击Dock栏空白处,选择启用放大 2 在Dock偏好设置中调整图标放大的倍数 3 滑动鼠标,查看放大效果

  6. stm32 map文件的分析

    相信有较大项目开发经验的朋友都曾遇到内存溢出的问题,那么大家都是如何分析这类问题的呢?大家遇到HardFault_Handler 有对map分析过吗? 首先讲述一下关于map在MDK-ARM中的配置. ...

  7. f5 SNAT

    request过程: 1.真实源地址(3.3.3.3)将数据包发给f5虚拟的vs地址(1.1.1.5:80): 2.f5将真实源地址(3.3.3.3)转换成SNAT地址(1.1.1.100),并将vs ...

  8. 【linux C】C语言中常用的几个函数的总结【二】

    3.fgets 虽然用 gets() 时有空格也可以直接输入,但是 gets() 有一个非常大的缺陷,即它不检查预留存储区是否能够容纳实际输入的数据,换句话说,如果输入的字符数目大于数组的长度,get ...

  9. 月饼问题PAT B1020（贪心算法）

    月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一部分库存.样 ...

  10. linux下查看配置信息命令

    # uname -a                                                 # 查看内核/操作系统/CPU信息# head -n 1 /etc/issue   ...