解析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 ...
随机推荐
- 【VBA】随机数
[说明] 随机数.生成2个随机数m.n,取值范围为1~R.1~C Randomize m = )) + ) ' 1~R Random Int Randomize n = )) + ) ' 1~C Ra ...
- Gym 100989F 水&愚&vector
standard input/output You must have heard about Agent Mahone! Dr. Ibrahim hired him to catch the che ...
- python之装饰器【转】
装饰器 先来看一个例子,一个函数f1接收另一个函数f2作为参数,并将该参数f2返回给f2: def deco(func): print("before myfunc() called.&qu ...
- Eclipse与MyEclipse修改注释字体颜色
修改配置路劲 Window--->Preferences--->Java--->Editor--->Syntax Coloring--->Element--->Co ...
- 百度识图for windows phone 上线
原文发布时间为:2013-07-04 -- 来源于本人的百度文章 [由搬家工具导入] 百度识图主要用于找女神，找男神，找美图，找宠物，找图文新闻，找相似图，找原图，还能鉴别头像照片真伪，免得被网络照片 ...
- HTML title属性换行显示的方法
原文发布时间为:2009-04-22 -- 来源于本人的百度文章 [由搬家工具导入] 解决的方法有两种： 1.将title属性分成几行来写，例如：<a href=#" title=&q ...
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---10
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- Linux下的软连接和硬链接
由于教学上的原因,需要下载Android源码,后来使用repo时,系统提示需要python2,我的系统中是两个都有的,但是默认是python3,无法下载,通过创建了个链接搞定,下面就来说说linux下 ...
- 大话tomcat之tomcat连接mysql
研究主题:tomcat连接mysql 一.tomcat连接mysql的两种连接方式:简单连接(不使用连接池)使用tomcat连接池 二.简单分析:(简介部分摘自一篇博客,觉得写得非常赞,读了非常有快感 ...
- 【转载】SQL SERVER 函数大全
SQL Server 函数大全 一旦成功地从表中检索出数据,就需要进一步操纵这些数据,以获得有用或有意义的结果.这些要求包括:执行计算与数学运算.转换数据.解析数值.组合值和聚合一个范围内的值等. 下 ...