解析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 ...
随机推荐
- JavaScript (JS)基础：ECMAScript 浅析 (含Math基本方法解析)
浏览器端JavaScript的组成 ECMAScript:语法规范 DOM:Document Object Model 文档对象模型,操作页面元素 BOM:Browser Object Model ...
- 洛谷 [P3620] 数据备份
贪心神题 首先我们发现一个显然的贪心策略,连接相邻两个写字楼总是更优. 所以本题就变成了数轴上一堆点,要选 k 个彼此不相邻的区间,使得区间长度最小 对于 10000 的数据来说,我们可以用 DP 解 ...
- asp.net 字符串替换、截取。
有时候要在一段字符串里面把某些字符替换成其他字符,怎么办? 例如: string image=@"csks/news/user_top/qqqq/qqqq.jpg"; image ...
- 使用T4模板创建一个例子
1.创建项目,添加新项,名称处填写Messages.tt,如下图: 添加后,Messages.tt文件内容如下: <#@ template debug="false" hos ...
- vue-cli脚手架每行注释
.babelrc文件 { // 此项指明,转码的规则 "presets": [ // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es ...
- Docker(二)：Docker的用途
Docker的优点: 1.Docker容器的启动可以在秒级实现,相比传统虚拟机方式快的多. 2.Docker资源利用率很高,一台主机上可以同时运行数千个Docker容器. 3.容器除了运行其中应用外, ...
- [LeetCode] Compare Version Numbers 字符串操作
Compare two version numbers version1 and version2.If version1 > version2 return 1, if version1 &l ...
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---53
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- C#根据反射和特性实现ORM映射实例分析
本文实例讲述了C#根据反射和特性实现ORM 映射的方法.分享给大家供大家参考.具体如下: (一)关于反射 什么是反射? 反射就是在运行时,动态获取对象信息的方法.比如:运行时获得对象有哪些属性,方法, ...
- Android，一条线串联实心圆布局
最近遇到一个简单的布局,不是listview的形式.就只是单纯的下图这种: 此界面布局代码: <?xml version="1.0" encoding="utf-8 ...