<!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. Creating Signing Identities 生成签名标识

    Before you can code sign your app, you create your development certificate and later, a distribution ...

  2. java测试框架整理

    Test: Junit4+Hamcrest 不多说了,就靠着两个 import static org.hamcrest.Matchers.equalTo; import static org.juni ...

  3. linux下设置固定IP

    编辑网卡配置文件 vi /etc/sysconfig/network-script/ifcfg-eth0 进入编辑模式 按i键进行编辑修改 DEVICE=eth0 #物理设备名 IPADDR=192. ...

  4. lua table integer index 特性

    table.maxn (table) Returns the largest positive numerical index of the given table, or zero if the t ...

  5. Spark:Join相关优化文章

    http://blog.csdn.net/lsshlsw/article/details/48975771 https://www.douban.com/note/499691663/ http:// ...

  6. post- build event

    Ref:http://blog.csdn.net/teng_ontheway/article/details/8307410 Ref: http://blog.csdn.net/sodickbird/ ...

  7. mysqlroot密码忘记了，修改root密码

    1,停止MYSQL服务,CMD打开DOS窗口,输入 net stop mysql 2,在CMD命令行窗口,进入MYSQL安装目录 比如E:\Program Files\MySQL\MySQL Serv ...

  8. XPath 简介

    XPath 是一门在 XML 文档中查找信息的语言.XPath 用于在 XML 文档中通过元素和属性进行导航. 在学习之前应该具备的知识: 在您继续学习之前,应该对下面的知识有基本的了解: HTML ...

  9. 怎样设置才能允许外网访问MySQL

    1.将本地数据库的user表的第一条记录的host数据改为%,或者用update user set host='%' where user='root'; 2.用MySQL的命令行客户端操作如下步骤: ...

  10. 我的第二个FluentNHibernate例子with Knockout

    在上一篇我的第一个FluentNHibernate例子的基础上,我们用上knockoutjs 1用nuget添加knockoutjs包 2用nuget添加json.net包 3..在Index.csh ...