手机响应式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/ ...
随机推荐
- 在四合院里写code是什么体验(非拉仇恨)
我工作的地点在一个幽静的四合院,后海边上.每次出了地铁还要走长长的十分钟的胡同,经过恬静的老人,嬉戏的小孩,还有就是长年不缺的游客.很多次,在夕阳将下未下时五六点的时候,小胡同里老人拿着小马扎,一群小 ...
- 采用阿里的API进行动态域名解析
#!/usr/bin/env python # -*- coding:utf-8 -*- import os from aliyunsdkcore import client from aliyuns ...
- 面向过程 vs 面向对象
从网上摘录了一些面向过程vs.面向对象的分析,先简单记录如下,稍后会继续整理. 为什么会出现面向对象分析方法? 因为现实世界太复杂多变,面向过程的分析方法无法实现. 面向过程 采用面向过程必须了解整个 ...
- (copy) Top Ten Reasons not to use the C shell
http://www.grymoire.com/Unix/CshTop10.txt ========================================================== ...
- Android四大核心组件之ContentProvider
实验内容 学习ContextProvider用法 编码实现简单ContextProvider功能 实验要求 通过简单代码了解ContextProvider功能和用法 实验步骤 ContextProvi ...
- python知识点总结
此知识要点,是根据学习廖雪峰phthon3.0教程总结的,所以结构基本和这个教程的结构相同. 背景知识 python是什么?(1)python是一门编程语言,意味着可以用python编写程序,完成一定 ...
- DS-5建工程
DS-5教程-使用ARM DS-5 和DSTREAM仿真器调试裸机程序 http://bbs.elecfans.com/jishu_453909_1_1.html i2c( 楼主 )2014-10-1 ...
- Hive:常用的一些命令
1.一般可以通过beeline,代理方式登录hive; 2.使用数据库abc_hive_db:use abc_hive_db; 3.查看数据库中有哪些表:show tables :有哪些特定表 sho ...
- JDK的安装与配置以及eclipse的使用
一,需要软件: jdk 和eclipse 二,JDK和eclipse的下载 JDK下载地址:http://www.oracle.com/technetwork/java/javase/download ...
- Thinkphp 中 distinct 的用法
TP中distinct()的用处主要是去除重复的值 在Thinkphp手册中也详细说明了(链接:http://document.thinkphp.cn/manual_3_2.html#distinct ...