解析iscroll-小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>iScroll demo: horizontal scrolling</title>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body,ul,li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden;
}
#header {
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}
#footer {
width: 100%;
height: 48px;
line-height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
text-align: center;
color: #Fff;
font-size: 18px;
}
#wrapper {
width: 100%;
height: 120px;
background: magenta;
overflow: hidden;
}
#scroller {
margin-top: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 5000px;
height: 100px;
background-color: #a00;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
text-align: center;
}
#scroller li {
display: block;
float: left;
width: 100px;
height: 100%;
border-right: 1px solid #ccc;
background-color: #fafafa;
font-size: 14px;
}
img{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper', {
scrollX: true,
scrollY: false,
mouseWheel:false, //是否监听鼠标滚轮事件。TRUE为监听，击鼠标滚动iscroll随着滚动。默认值为FALSE
scrollbars:false, //是否显示默认滚动条.false为默认值 不显示。
disableMouse:true,
tab:true, //设置此属性为true，当滚动区域被点击或者触摸但并没有滚动时，可以让iScroll抛出一个自定义的tap事件。
preventDefault:false //当事件触发时师傅执行preventDefault()。此属性应该设置为true，除非你真的知道你需要怎么做。
});
}
</script>
</head>
<body onload="loaded()">
<div id="header">iScroll-左右滑动demo</div>
<div id="wrapper">
<div id="scroller">
<ul>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
<li><img src="img/01_m.jpg"/></li>
<li><img src="img/1_m.jpg"/></li>
</ul>
</div>
</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
<div id="footer">iScroll demo: horizontal scrolling</div>
</body>
</html>
解决iscroll的点击为双击问题！ 引入：fastclick.js
解析iscroll-小demo的更多相关文章
- LUA解析json小demo
需要修改的json数据gui-config.json { "configs": [{ "server": "JP3.ISS.TF", &qu ...
- SpringMVC小demo解析
第一次实际接触SpringMVC,之前在教程网站上看得是概念性的. SpringMVC是属于Java框架SSM中的一环 在做了一个小demo后发现原来编程如此简单. 首先建立动态网页项目(Dynami ...
- Nancy之基于Self Hosting的补充小Demo
前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self H ...
- Jsoup小Demo
Jsoup小Demo public class JsoupUtil { public void parseWangYi() { Document doc = null; try { //eg1:解析百 ...
- 一周一个小demo — 前端后台的交互实例
这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...
- 基于BaseAdapter的Listview小Demo
ListView是android开发中比较常用的控件, 其中适配器模式可以选择: ArrayAdapter:简单易用,通常用于将数组或者List集合的读个包值封装成多个列表项 SimpleAdapte ...
- python 词云小demo
词云小demo jiebawordcloud 一 什么是词云? 由词汇组成类似云的彩色图形.“词云”就是对网络文本中出现频率较高的“关键词”予以视觉上的突出,形成“关键词云层”或“关键词渲染”,从而过 ...
- H5 PWA技术以及小demo
H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...
- 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo
简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...
- 新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
随机推荐
- springboot使用restTemplate post提交值 restTemplate post值
post提交有 FormData和Payload 两种形式: 第一种是formdata形式,在header参数里可以直接看到 payload则封装成json格式post过去,获取以后需要再解析 ...
- hdu Rich Game 6245
Rich Game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- HDOJ 1085 Holding Bin-Laden Captive!
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
- jenkins下脚本权限问题
在jenkins环境下,执行需要root权限的脚本,报错. 修改方法: 1. centos环境下,在/etc/sudoers.d/ 目录下,增加一个 jenkins文件,内容如下: Defaults: ...
- hdu 4497(排列组合+LCM和GCD)
GCD and LCM Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total ...
- Alfred添加百度搜索
Alfred默认的搜索只有 google; amazon和wikipakia, 我想加个百度搜索,怎么添加呢? 1.首先添加百度搜索,添加http://www.baidu.com/s?wd={quer ...
- AC日记——[SCOI2007]蜥蜴 bzoj 1066
1066 思路: 网络流最大流: 拆点,每个点拆成两个,流量为这个点的高度: 注意,文中说的距离是曼哈顿距离(劳资以为开根号wa了不知道多少次): 每两个距离不大于d的点连边,流量inf: 如果距离能 ...
- HTML5-contentEditable属性规定是否可编辑元素的内容
contentEditable='true' :可以编辑 contentEditable='false' :不可以编辑
- 51Nod 1272最大距离 （树状数组维护前缀最小值）
题目链接 最大距离 其实主流解法应该是单调栈……我用了树状数组. #include <bits/stdc++.h> using namespace std; #define rep(i, ...
- PHP如何在页面中原样输出HTML代码
字符串与HTML之间的相互转换主要应用htmlentities()函数来完成. header("Content-Type: text/html; charset=utf-8"); ...