<!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. JAVASE02-Unit09： 多线程基础

    Unit09: 多线程基础 * 线程 * 线程用于并发执行多个任务.感官上像是"同时"执行 *  * 创建线程有两种方式. * 方式一: * 继承线程并重写run方法来定义线程要执 ...

  2. swift：谈谈swift几种常见属性的区别

    一.前奏 Swift作为一门新语言,经过几年的发展,逐渐趋于完善,目前已经更新到3.0版本,它汇集许多其他语言的特点,例如JS.Paython.C++等,完全区别于OC.个人感觉它没有完全的OOP和O ...

  3. Android下读取logcat的信息

    有时我们需要在程序执行进程中遇到一些异常,需要收集一logcat的信息,android下就可以使用以下方法获取: private static String getLogcatInfo(){ Stri ...

  4. 合并分区(merge range)对事务日志的影响

    分区维护作业执行失败,错误信息如下:数据库 'XXX' 的事务日志已满.若要查明无法重用日志中的空间的原因,请参阅 sys.databases 中的 log_reuse_wait_desc 列. [S ...

  5. [CC]区域生长算法——点云分割

    基于CC写的插件,利用PCL中算法实现: void qLxPluginPCL::doRegionGrowing() { assert(m_app); if (!m_app) return; const ...

  6. Python之路----------内置函数

    1.abs(x)绝对值 #coding=utf-8 a = 1 b = -2 print(abs(a)) print(abs(b)) 2.all(iterable)可迭代对象里面所有内容为真返回真,空 ...

  7. Http TCP/IP 协议的关系

    转自:http://www.cnblogs.com/ymy124/archive/2012/03/18/2404958.html 项目要求Web服务是高安全级别,在选择.net remoting,we ...

  8. Cef 架构

    cef支持各种语言和多种操作系统.在设计的时候充分考虑了性能和易用性.cef核心功能提供了c和c++的接口.cef提供了和主程序之间的通信能力(利用 custom plugins, protocols ...

  9. linux-bash shell学习

    什么是shell?shell就相当于是计算机给我提供的一个操作系统的接口,这里说的bash shell是一种命令行方面的软件,提供给用户来操作系统.

  10. Hash工具下载地址

    因为经常要在非常用电脑使用,这里放一个链接,方便下载: http://files.cnblogs.com/files/cxun/Hash.zip HASH计算工具,可计算MD5.SHA-1.CRC32 ...