<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}

html {
font-size: 20px;
}

#wrap {
width: 16rem;
height: 7.5rem;
margin: 0 auto;
overflow: hidden;
}

#wrap ul {
width: 64rem;
height: 7.5rem;
}

#wrap ul li {
font-size: 2rem;
color: #fff;
width: 16rem;
height: 7.5rem;
float: left;
text-align: center;
line-height: 7.5rem;
}
</style>
<script>
(function (win, doc) {
function change() {
doc.documentElement.style.fontSize = 20 * doc.documentElement.clientWidth / 320 + 'px';
}

change();
win.addEventListener('resize', change, false);
})(window, document);

document.addEventListener('DOMContentLoaded', function () {
var oUl = document.querySelectorAll('#wrap ul')[0];
var aLi = oUl.children;
var x = 0;
var iNow = 0;
oUl.addEventListener('touchstart', function (ev) {
var downX = ev.targetTouches[0].pageX;
var disX = downX - x;

function move(ev) {
x = ev.targetTouches[0].pageX - disX;
oUl.style.WebkitTransform = 'translate3d(' + x + 'px,0,0)';
}
function end(ev) {
oUl.removeEventListener('touchmove', move, false);

oUl.removeEventListener('touchend', end, false);
oUl.style.WebkitTransition = 'all 300ms ease';
var upX = ev.changedTouches[0].pageX;

if (Math.abs(upX - downX) > 100) {//切换到下一张;
if (downX > upX) {
iNow++;
if (iNow == aLi.length)iNow = aLi.length - 1;
} else {
iNow--;
if (iNow == -1)iNow = 0;
}
}
x = -iNow * aLi[0].offsetWidth;
oUl.style.WebkitTransform = 'translate3d(' + x + 'px,0,0)';
}

oUl.addEventListener('touchmove', move, false);

oUl.addEventListener('touchend', end, false);

ev.preventDefault();
}, false);

}, false);
</script>
</head>
<body>
<div id="wrap">
<ul>
<li style="background: red;">0</li>
<li style="background: #1a3cff;">1</li>
<li style="background: #66ff11;">2</li>
<li style="background: #ff127e;">3</li>
</ul>
</div>
</body>
</html>

移动端js写法的更多相关文章

  1. 高性能双端js模板

    高性能双端js模板(新增filter)---simplite simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染. 渲染性能十分突出. 支持浏览器 ...

  2. 高性能双端js模板---simplite

    simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染,渲染性能达到引擎的极限. 渲染性能十分突出. 支持浏览器端和node服务器端模板渲染. 它简单 ...

  3. 浏览器端JS导出EXCEL

    浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...

  4. 🤔 移动端 JS 引擎哪家强？美国硅谷找......

    如果你喜欢我写的文章,可以把我的公众号设为星标 ,这样每次有更新就可以及时推送给你啦 在一般的移动端开发场景中,每次更新应用功能都是通过 Native 语言开发并通过应用市场版本分发来实现的.但是市场 ...

  5. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  6. 移动端-js触摸事件

    开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...

  7. JQ写法和js写法 方法函数化

    <script> $(function () { $('#head').click=function () { alert($(this).html()) } }) </script ...

  8. 移动端 js touch事件

    随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...

  9. ajax跨域请求，页面和java服务端的写法

    方法一(jsonp): 页面ajax请求的写法: $.ajax({ type : "get", async : false, cache : false, url : " ...

随机推荐

  1. 完全使用接口方式调用WCF 服务

    客户端调用WCF服务可以通过添加服务引用的方式添加,这种方式使用起来比较简单,适合小项目使用.服务端与服务端的耦合较深,而且添加服务引用的方式生成一大堆臃肿的文件.本例探讨一种使用接口的方式使用WCF ...

  2. JMeter学习-031-JMeter 3.0 POST Body Data 中文乱码问题

    今天,朋友将 JMeter 的版本由 2.13 升级到了 3.0 发现之前接口脚本 POST 请求主体中的中文无法正确显示,现象如下图所示:

  3. spring boot + gradle[草稿]

    入门文档:https://github.com/qibaoguang/Spring-Boot-Reference-Guide 安装gradle 官方下载 https://gradle.org/grad ...

  4. 第二篇：白话tornado源码之待请求阶段

    上篇<白话tornado源码之一个脚本引发的血案>用上帝视角多整个框架做了一个概述,同时也看清了web框架的的本质,下面我们从tornado程序的起始来分析其源码. 概述 上图是torna ...

  5. Netty NIO 框架性能压测-短链接-对比Tomcat

    压测方案 准备多个文件大小分别为 1k 10k 100k 300k 使用ab分别按 [50,2000](按50逐渐叠加)压测服务,每次请求10W次 硬件信息:CPU:Intel(R) Xeon(R) ...

  6. iOS获取当前AppStore版本号与更新

    - (void)checkUpdateWithAppID:(NSString *)appID success:(void (^)(NSDictionary *resultDic , BOOL isNe ...

  7. iOS - NSString去掉回车与换行符

    代码展示: 由于服务器返回的字符串有回车与/n自己设置的xib的label显示装不下了,所以初次下策也没通知服务端自己改一下吧. NSString *str = fault.fault_content ...

  8. python---tcp/ip网络编程

    重点总结: 服务端:一直运行(while true),监听运行所在机器(ip)某端口,多线程或多进程接收客户端的socket请求 客户端:主动发起请求,需求知道服务器的ip和端口 服务端: # -*- ...

  9. XPath Axes（轴）

    XML 实例文档 我们将在下面的例子中使用此 XML 文档: <?xml version="1.0" encoding="ISO-8859-1"?> ...

  10. poj 3190 Stall Reservations

    http://poj.org/problem?id=3190 Stall Reservations Time Limit: 1000MS   Memory Limit: 65536K Total Su ...