手机响应式js轮播基础
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轮播基础的更多相关文章
- (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播
ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
- 响应式js幻灯片代码一枚
网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
- js___原生js轮播
原生js轮播 作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF ...
- JavaScript的案例(数据校验,js轮播图,页面定时弹窗)
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- 纯js轮播图练习-2,js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- 原生JS轮播-各种效果的极简实现(二)面向对象版本的实现和优化
之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 远程连接服务器for Linux
远程连接Linux云服务器-命令行模式 1.远程连接工具.目前Linux远程连接工具有很多种,您可以选择顺手的工具使用.下面使用的是名为Putty的Linux远程连接工具.该工具是免费的,且不需要安装 ...
- Linux-001-nmon系统性能监控工具的使用及报表产出
在进行性能测试的时候,需要获取服务器的各项指标,例如 CPU.MEM.I/O.DISK 等.网上有很多的监控工具,nmon 就是其中的一个,其可与 JMeter结合使用,测试系统的性能.其概要的介绍, ...
- 在java中获取attr的值
首先说如何获取已经在style里面定义好的attr的值,以colorPrimary为例: TypedValue value = new TypedValue(); mContext.getTheme( ...
- iOS,多媒体,地图相关
1.本地音频播放 2.本地视频播放 3.使用UIImagePickerController摄像头拍照,录像,照片库浏览 4.使用AVFunction,AVCaptureVideoDataOutput实 ...
- poj 1835 宇航员
http://poj.org/problem?id=1835 宇航员 Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 4802 ...
- window.onload和$(document).ready()的区别
window.onload和$(document).ready()的区别,如下表所示 window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...
- 利用 Serial Over Lan(SOL)搭建 XEN 的调试信息输出环境
如有转载,请注明出处与本文连接,谢谢! 修改XEN的源码实现额外的功能,需要有一个调试环境来得到XEN的调试信息(有关源码编译并安装 XEN 请阅读我以前的博文:在CentOS下源码安装 Xen并搭建 ...
- PHP开发中的缓存技术汇总
在PHP开发中,出于对网站服务器负载的考虑,往往需要对页面.数据等内容进行缓存处理,下面就来看看,在PHP开发中有哪些缓存方式吧. 1.页面部分缓存该种方式,是将一个页面中不经常变的部分进行静态缓存, ...
- Swift设置textView的行间距
let textview = UITextView(frame: CGRect(x: 100, y: 100, width: 100, height: 200)) let paraph = NSMut ...
- wex5 实战 单页模式下的多页面数据同步
在wex5官方教程中,关于多页模式与单页模式进行了对比.两者最大的区别在于: 1 web加载速度,单页模式快于多页模式 2 多页模式对加载机制进行了预加载,一次加载之后再次加载,就会加快. 但是,由 ...