手机响应式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/ ...
随机推荐
- marathon新建应用映射端口限制
映射端口范围不能使用:1~1024 (除 80 443), 5000~5100, 6000~6999, 10000~20000, 31000~32000 映射端口可能与 Chrome 冲突: 6665 ...
- java实现删除文件以及文件夹
首先,需要明确的是File类中的delete()方法适用于删除空目录,或者单个文件. 然后,对于二级目录以上的文件夹的删除,需要分两步进行删除. 1.删除最底层目录下面的文件,或者空目录 当有多个文件 ...
- .NET client connection Limit
调试出了一个诡异的问题,使用多个进程没问题,单进程出现了. fix: //默认限制为2个连接 //public const int DefaultPersistentConnectionLimit = ...
- 区间K 大数查询
算法训练 区间k大数查询 时间限制:1.0s 内存限制:256.0MB 问题描述 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列 ...
- iframe
var ifr = document.getElementById('ifr'); var win = ifr.window || ifr.contentWindow; win.a(); // 调用i ...
- My Env
Font -- YaHei Consolas Hybrid YaHei ConsolasAsume that we put the font file in /usr/share/fonts/myfo ...
- 实测:Windows 8.1 (Windows Blue) 第三方桌面应用无法支持Retina屏,效果与Windows8.0似无差别。
首先我是在VMWARE下装的Windows Blue,是否改用BootCamp直接装就没问题我不知道,理论上应该无差别. 谣言里那个Windows Blue里的缩放功能可以完美支持Retina,但实际 ...
- Node.js Express 框架 POST方法
POST 方法 以下实例演示了在表单中通过 POST 方法提交两个参数,我们可以使用 server.js 文件内的 process_post 路由器来处理输入: index.htm 文件代码修改如下: ...
- Linux_know
Linux_know 在创建Linux分区时,一定要创建SWAP/根分区两个分区 Red Hat Linux 9中,系统默认的root用户对整个系统拥有完全的控制权. 当登录Linux时,一个具有唯一 ...
- asp.net的mongodb实例
mongodb为2.6版本, .net是4.0, c#接口时1.7. 运行环境为windows8 with visual studio2010 注意事项:在mongodb中使用地理位置存储信息且动用到 ...