onmousedown
--->ontuchstart

onmousemove
--->ontouchmove

onmouseup
--->ontouchend

ontuchstart & ontouchmove & ontouchend 必须通过事件绑定的形式添加;

尽快的把页面呈现给用户:
window.onload ----> 不靠谱;
DOMContentLoaded

clientX ---> ev.targetTouches,是一个列表,使用的时候需要加下标使用;
pageX:算上了scrollL; 在PC端不兼容;
pageY:算上了scrollTop; 在PC端不兼容;

会闪烁:开启硬件加速;
translate3d();

会卡顿:
ev.preventDefault();

只能拖动一次:
事件加给document;

手指抬起[ontouchend]的距离:ev.changedTouches[0].pageX;

手机响应式js轮播基础的更多相关文章

  1. (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播

    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...

  2. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  3. 响应式js幻灯片代码一枚

    网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...

  4. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  5. js___原生js轮播

    原生js轮播 作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF ...

  6. JavaScript的案例(数据校验,js轮播图,页面定时弹窗)

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  7. 纯js轮播图练习-2,js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  8. 原生JS轮播-各种效果的极简实现(二)面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  9. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Mac使用最多的软件,整理集合

    软件资源 #[PDF移除密码]Cisdem PDFPasswordRemover 3.0.0 [TNT] #Alfred_3.1.1_737 #fwmso2016vlu2.0 #iHosts #Omn ...

  2. css控制文字大小及颜色、字体

    字体:font-style:italic:斜体         font-weight:bold:加粗         font-size:30px:大小         line-height:30 ...

  3. Python学习【第十一篇】模块(1)

    模块 模块让你能够有逻辑地组织你的Python代码段. 把相关的代码分配到一个模块里能让你的代码更好用,更易懂. 模块也是Python对象,具有随机的名字属性用来绑定或引用. 简单地说,模块就是一个保 ...

  4. 真机远程调试 ( IOS Android 以及微信,weex)

    1.以前cordova远程调试,Android的直接连接USB后,用chrome打开chrome://inspect网址 IOS的打开Safari的developer下. 这是因为cordova的we ...

  5. Uiautomator ——API详解(转载http://www.cnblogs.com/by-dream/p/4921701.html)

    转载来源: 简单的例子 以一个简单的例子开始吧.我们完成一个 " 打开QQ,进入QQ空间,然后退出 " 的case. 代码如下: package QQ; import java.i ...

  6. iostat 命令

    iostat -x 1 10 Linux 2.6.18-92.el5xen 02/03/2009 avg-cpu: %user %nice %system %iowait %steal %idle 1 ...

  7. installing mysql,this may take a few minutes,hold on plz wdcp卡住解决办法

    centos6安装wdcp时make in progress卡住的解决办法 今天在一台centos6的vps上安装wdcp出现的这个问题,到安装程序滚动至下面这里时出现"卡死". ...

  8. Java中的Atomic包使用指南

    Atomic包介绍 在Atomic包里一共有12个类,四种原子更新方式,分别是原子更新基本类型,原子更新数组,原子更新引用和原子更新字段.Atomic包里的类基本都是使用Unsafe实现的包装类. 原 ...

  9. RDIFramework.NET ━ .NET快速信息化系统开发框架钜献 V3.0 版本强势发布

    继上个版本“RDIFramework.NET V2.9版本”的推出,受到了重多客户的认可与选择,V2.9版本是非常成功与稳定的版本,感谢大家的认可与长期以来的关注与支持.V3.0版本在V2.9版本的基 ...

  10. ubuntu14.04下安装python3.4.2

    1. python安装包的下载地址:https://www.python.org/downloads/ 我的python安装包下载地址:https://www.python.org/ftp/pytho ...