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. zabbix 自定义探索规则发现服务器上面的kvm虚拟机和对应的网卡

    安装完zabbix服务器之后 只有两个探索规则模版,挂载点探索和网卡探索 场景描述:想使用zabbix监控kvm虚拟机的网卡的流量情况, 获取虚拟机和网卡对应关系 虚拟机 S-1 virsh domi ...

  2. 让超出父视图范围的子视图响应事件,在UIView范围外响应点击

    /** *  在父视图中重写该方法,这样可使超出部分响应事件. */ - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {  ...

  3. Issue 6: 装机系列1,PC下windows系统安装指南

    0.前言 接触电脑将近7年时间,多次说要写下这篇文章,一直未曾提笔,始终怕给人以误导.到如今,来来回回装系统的次数得超过百次了.本着不误导人的想法,本文试着总结一下装系统的基本方法和思路,但不会过多涉 ...

  4. Python之路-(Django(Cookie、分页))

    Cookie 分页 1.获取Cookie: request.COOKIES['key'] request.get_signed_cookie(key, default=RAISE_ERROR, sal ...

  5. 漫谈java重载与重写

    重载(Overloading):为了让方法名相同而形参不同的构造方法同时存在,让类以统一的方式处理不同类型数据的一种手段 重写(Overriding):导出类对继承自基类的方法做出一定的修改,又称方法 ...

  6. Windows Phone 二十一、联系人存储

    联系人资料是手机上必有的,在最新的 Windows Phone 中开放了相应的 API ,以便于应用程序读写通讯录. 注意:系统没有对整个手机自带的通讯录写入开放权限,每个应用只能管理属于当前应用的联 ...

  7. HTML5--页面自动居中

    注意: margin:0 auto;/**0:上下    auto:左右**/ <html lang="en"> <head> <meta chars ...

  8. mac下使用gcc

    1.下载安装macports:http://www.macports.org/install.php 安装完成之后,打开终端 2.在终端中输入 port install gcc_select 3.使用 ...

  9. 自适应网页设计(Responsive Web Design)

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  10. sqlserver 锁与阻塞

    DDL/索引重建 会申请 Sch-M锁 with (nolock) 会申请 Sch-S锁 with (nolock)会阻塞 sch-M, 同样Sch-M也会 阻塞with (nolock) 索引重建2 ...