webapp利用iscroll实现同时横滚|竖滚
<!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实现同时横滚|竖滚的更多相关文章
- EF Core利用Transaction对数据进行回滚保护
What? 首先,说一下什么是EF Core中的Transaction Transaction允许以原子方式处理多个数据库操作,如果事务已提交,则所有操作都应用于数据库,如果事务回滚,则没有任何操作应 ...
- 移动WebApp利用Chrome浏览器进行调试
详细的请看这个(HBuilder是我长期使用,而且值得支持的国内前端开发编辑器) http://ask.dcloud.net.cn/article/151 http://ask.dcloud.net. ...
- 移动端利用iscroll实现小图变大图
大图界面,使用iscroll,定义如下: var myScroll; function loaded(){ myScroll = new iScroll('wrapper', { zoom:true, ...
- 利用iscroll实现上拉加载下拉刷新
1.首先引用isScroll插件 说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction ...
- 利用HBuilder打包Vue开发的webapp为app
众所周知,前端开发完成的webapp只能运行在浏览器上,对运行环境有一定的限制,也就是除了浏览器其他的环境下不支持:那么现在如果有个需求是这样的呢?需要一套代码三端运行呢?三端运行(黑人脸??)是的, ...
- 用VC实现竖写汉字的方法
中国人自古就有自右至左.从上到下书写汉字的习惯.而当我们在自己所编写的应用程序中使用输出函数输出的总是自左至右的横排文字.有没有可能在我们的应用程序中实现竖写汉字的效果呢?笔者偶然发现了一种利用VC实 ...
- ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息
一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...
- 利用ant脚本 自动构建svn增量/全量 系统程序升级包
首先请允许我这样说,作为开发或测试,你一定要具备这种 本领.你可以手动打包.部署你的工程,但这不是最好的方法.最好的方式就是全自动化的方式.开发人员提交了代码后,可以自动构建.打包.部署到测试环境. ...
- 使用iScroll实现上拉或者下拉刷新
上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...
随机推荐
- mysql里max_allowed_packet的作用
MySQL根据配置文件会限制Server接受的数据包大小.有时候大的插入和更新会受 max_allowed_packet 参数限制,导致写入或者更新失败. 查看目前配置: 代码如下: show VAR ...
- scrapy 是指user_agent
1.倒入random模块 2.在settings文件中添加useragent列表 MY_USER_AGENT = [ "Mozilla/4.0 (compatible; MSIE 6.0; ...
- 与服务器同步工程（expect脚本）
先看下我实际用的例子: #!/usr/bin/expect spawn rsync -vazu ssh-src/src wayne@192.168.5.2:~/projects/ expect &qu ...
- Flask中路由系统、Flask的参数及app的配置
@app.route('/', methods=['GET', 'POST']) 1. @app.route()装饰器中的参数 methods:当前URL地址,允许访问的请求方式 @app.route ...
- 有关vim的一些命令
所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是 vim 编辑器. vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的正 ...
- C++旅馆问题。
有总钱数 有每房每天住需要多少钱 问最少可以住几天 最后输入的是钱数.前边输入没个住所每天多少钱 例如: 1001 1002 1003 1004 1000 -1 100 500 600 最少一天,最多 ...
- 项目总结12：bootstrap-select下拉框模糊搜索
bootstrap select下拉框模糊搜索 关键字 bootstrap-select 下拉框模糊搜索 正文(直接上源码) <%@ page language="java" ...
- SQL那些事儿（十一）--ODBC，OLE-DB，ADO.NET区别[转]
一.ODBC ODBC的由来 1992年Microsoft和Sybase.Digital共同制定了ODBC标准接口,以单一的ODBC API来存取各种不同的数据库.随后ODBC便获得了许多数据库厂 ...
- python3 安装使用 fabirc3 模块以及 fab 命令（转）
原文地址:https://blog.csdn.net/cityzenoldwang/article/details/78454964 python3 fabric3 模块之 fab 命令 安装 pyt ...
- iOS 集成极光推送
最近极光推送更新到V3版本之后,推送又不成功!配合服务器联调了半天,发现是服务器环境配置有问题. 想着就把极光推送的步骤给记录下来. 一.配置push证书 这个可以到极光文档里写,很详细 二.导入必要 ...