<!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. 正经学C#_介绍与其编写基础：《c#入门经典》

    本文所讲内容,均可在<c#入门经典>中可以查询.如有错误,敬请指出.谢谢! C#:全称C Shar.是微软.Net Framework平台下最为主要的客户语言之一.个人理解,c#是微软最为 ...

  2. wp8.1 VS2013部署手机发生 DEP6100 6200错误

    wp8.1 VS2013部署手机发生 DEP6100 6200错误 ,提示未发现手机. 可能是数据线有问题 建议更换 本人的电脑有很多次,提示DEP6100 6200错误,每一次都需要重做系统.. 然 ...

  3. margin属性

    可以设置position:absolute/relative/fixed,通过调节top/bottom/left/right实现元素的定位,这样很好,但是有时候想通过margin来实现. 下面是mar ...

  4. SQLServer中用先进先出思想求成本价和平均成本单价

    1.首先是创建表: create table #in ( id ,), TDate datetime not null, goodcode ) , InNum ,) null, --入库数量 Pric ...

  5. Windows XP 新增API函数列表

    SetFileShortNameConvertFiberTothreadCreateFiberExDuplicateEncryptionInfoFileEnumGeoInfoProcEnumSyste ...

  6. ffmpeg将图片合成视频

    本来想做个android录制屏幕的功能,但是目前只能是截图 然后把图片合成视频,这里就需要用到 ffmpeg 在做之前也是参考了其它一些比较不错的文章 比如:http://www.open-open. ...

  7. NDK开发－Android Studio+gradle-experimental开发ndk

    在最新的Android Studio2.2的preview版中,增加全新的ndk支持,使用了新的gradle,以及DSL语言. 新的NDK需要使用新的Gradle插件和新的Android插件来支持! ...

  8. python实现汉诺塔

    经典递归算法汉诺塔分析: 当A柱子只有1个盘子,直接A --> C 当A柱子上有3个盘子,A上第一个盘子 --> B, A上最后一个盘子 --> C, B上所有盘子(1个) --&g ...

  9. SQLite的优化总结

    网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下. 1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2 ...

  10. qt qml fuzzyPanel 毛玻璃效果

    毛玻璃效果,用qml来写代码真是简短,大爱qml:) [下载地址]http://download.csdn.net/detail/surfsky/8426641 [核心代码] Rectangle{ c ...