昆山网站建设kshuituo,百度智能小程序是什么,做电影网站的资源从哪里换,昆明网红二、移动端网页特效
1、触屏事件
触摸事件概述 常见的触屏事件#xff1a; 触屏touch事件说明touchstart手指触摸到一个 DOM 元素是触发touchmove手指在一个 DOM 元素上滑动时触发touchend手指从一个 DOM 元素上移开时触发 示例#xff1a; !DOCTYPE html
html…二、移动端网页特效
1、触屏事件
触摸事件概述 常见的触屏事件 触屏touch事件说明touchstart手指触摸到一个 DOM 元素是触发touchmove手指在一个 DOM 元素上滑动时触发touchend手指从一个 DOM 元素上移开时触发 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 100px;height: 100px;background-color: pink;}/style
/head
bodydiv/divscriptvar div document.querySelector(div);div.addEventListener(touchstart, function() {console.log(I touched you.);})div.addEventListener(touchmove, function() {console.log(I touch you again.);})div.addEventListener(touchend, function() { console.log(I dont touch you.);})/script
/body
/html 触摸事件对象TouchEvent 常见触摸事件对象 触摸列表说明touches正在触摸屏幕的所有手指的一个列表targetTouches正在触摸当前 DOM 元素上的手指的一个列表changedTouches手指状态发生了改变的列表从无到有、从有到无的改变 移动端拖动元素 当前手指的坐标值可以使用 targetTouches[0] 里面的 pageX 和 pageY移动端拖动距离盒子原来的位置 手指移动的距离手指移动的距离手指滑动中的位置 - 手指刚开始触摸的位置 注意手指移动会触发滚动屏幕所以要阻止默认的屏幕滚动 e.preventDefault(); 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}/style
/head
bodydiv/divscriptvar div document.querySelector(div);// 手指初始坐标var startX 0;var startY 0;// 盒子原来的位置var x 0;var y 0; div.addEventListener(touchstart, function(e) {startX e.targetTouches[0].pageX;startY e.targetTouches[0].pageY;x this.offsetLeft;y this.offsetTop;})div.addEventListener(touchmove, function(e) {// 手指移动距离var moveX e.targetTouches[0].pageX - startX;var moveY e.targetTouches[0].pageY - startY;this.style.left x moveX px;this.style.top y moveY px;e.preventDefault(); })/script
/body
/html2、移动端常见特效
classList 属性 classList 属性是 HTML5 新增的一个属性返回元素的类名但是 ie10 以上版本才支持。 该属性用于在元素中添加、移除及切换 CSS 类 添加 element.classList.add(类名); 移除 element.classList.remove(类名); 切换: element.classList.toggle(类名); 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.bg {background-color: black;}/style
/head
bodydiv classone two/divbutton开关灯/buttonscriptvar div document.querySelector(div);// console.log(div.classList[1]);// 1.添加div.classList.add(three);// 2.移除div.classList.remove(one);// 3.切换var btn document.querySelector(button);btn.addEventListener(click, function() {document.body.classList.toggle(bg);})/script
/body
/htmlclick 延时解决方案 移动端 click 事件会有 300ms 的延时原因是移动端屏幕双击会缩放 (double tap to zoom) 页面。 禁用缩放 meta nameviewport contentuser-scalableno 利用 touch 事件自己封装这个事件 记录触摸事件用结束触摸事件减去触摸时间若该时间超过150ms并且没有滑动屏幕则认为点击 // 封装tap, 解决 click 300ms 延时
function tap(obj, callback) {var isMove false;var startTime 0; // 触摸时间obj.addEventListener(touchstart, function(e) {startTime Date.now();});obj.addEventListener(touchmove, function(e) {isMove true; // 是否有滑动})obj.addEventListener(touchend, function(e) {if (!isMove (Date.now() - startTime) 150) {callback callback();}isMove false;startTime 0;});
}
tap(div, function() {...})3.使用插件fastclick !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 50px;height: 50px;background-color: pink;}/stylescript srcfastclick.js/script
/head
bodydiv/divscriptif (addEventListener in document) {document.addEventListener(DOMContentLoaded, function() {FastClick.attach(document.body);}, false);}var div document.querySelector(div);div.addEventListener(click, function() {alert(1);})/script
/body
/html3、移动端常用开发插件
fastclick.js 的使用
Swiper 插件的使用
其他移动端常见插件 superslideiscroll 移动端视频插件 zy.media.js
4、移动端常用开发框架
Bootstrap
