JS 移动端网页特效(一)
2022年7月30日 周六学习记录博客。学习时长:3.5h,学习进度:移动端网页特效
目录
移动端网页特效
1. 触屏事件
1.1 触屏事件概述
1.2 触摸事件对象(TouchEvent)
1.3 移动端拖动元素
2. 常见特效
2.1 classList 属性
2.2 click 延时解决方案
移动端网页特效
1. 触屏事件
1.1 触屏事件概述
移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。 常见的触屏事件如下:
1.2 触摸事件对象(TouchEvent)
TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
touchstart、touchmove、touchend 三个事件都会各自有事件对象。
触摸事件对象重点我们看三个常见对象列表:
因为平时我们都是给元素注册触摸事件,所以重点记住 targetTocuhes
1.3 移动端拖动元素
1. touchstart、touchmove、touchend 可以实现拖动元素
2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY
3. 移动端拖动的原理: 手指移动中,计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
4. 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置
拖动元素三步曲:
- 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置
- 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子
- 离开手指 touchend:
注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
2. 常见特效
2.1 classList 属性
classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。
该属性用于在元素中添加,移除及切换 CSS 类。有以下方法
添加类:
element.classList.add(’类名’);
移除类:
element.classList.remove(’类名’);
切换类:
element.classList.toggle(’类名’);
注意以上方法里面,所有类名都不带点。
2.2 click 延时解决方案
移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案:
1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。
2. 利用touch事件自己封装这个事件解决 300ms 延迟。
原理就是:
- 当我们手指触摸屏幕,记录当前触摸时间
- 当我们手指离开屏幕, 用离开的时间减去触摸的时间
- 如果时间小于150ms,并且没有滑动过屏幕, 那么我们就定义为点击
案例:移动端轮播图
移动端轮播图功能和基本PC端一致。
- 可以自动播放图片
- 手指可以拖动播放轮播图
自动播放功能
- 开启定时器
- 移动端移动,可以使用translate 移动
- 想要图片优雅的移动,请添加过渡效果
自动播放功能-无缝滚动
- 注意,我们判断条件是要等到图片滚动完毕再去判断,就是过渡完成后判断
- 此时需要添加检测过渡完成事件 transitionend
- 判断条件: 如果索引号等于 3 说明走到最后一张图片,此时 索引号要复原为 0
- 此时图片,去掉过渡效果,然后移动
- 如果索引号小于0, 说明是倒着走, 索引号等于2
- 此时图片,去掉过渡效果,然后移动
小圆点跟随变化效果
- 把ol里面li带有current类名的选出来去掉类名
- remove 让当前索引号 的小li 加上 current add
- 但是,是等着过渡结束之后变化,所以这个写到 transitionend 事件里面
手指滑动轮播图 (本质就是ul跟随手指移动简单说就是移动端拖动元素 )
- 触摸元素 touchstart: 获取手指初始坐标
- 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子
- 离开手指 touchend: 根据滑动的距离分不同的情况
- 如果移动距离小于 某个像素,就回弹原来位置
- 如果移动距离大于某个像素就上一张下一张滑动。
- 滑动也分为左滑动和右滑动 判断的标准是 移动距离正负 如果是负值就是左滑 反之右滑
- 如果是左滑 就播放下一张 (index++)
- 如果是右滑 就播放上一张 (index--)
<div class="focus"><ul><li><img src="upload/focus3.jpg" alt=""></li><li><img src="upload/focus1.jpg" alt=""></li><li><img src="upload/focus2.jpg" alt=""></li><li><img src="upload/focus3.jpg" alt=""></li><li><img src="upload/focus1.jpg" alt=""></li></ul><!-- 小圆点 --><ol><li class="current"></li><li></li><li></li></ol>
</div><script>
window.addEventListener('load', function() {// alert(1);// 1. 获取元素 var focus = document.querySelector('.focus');var ul = focus.children[0];// 获得focus 的宽度var w = focus.offsetWidth;var ol = focus.children[1];// 2. 利用定时器自动轮播图图片var index = 0;var timer = setInterval(function() {index++;var translatex = -index * w;ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + translatex + 'px)';}, 2000);// 等着我们过渡完成之后,再去判断 监听过渡完成的事件 transitionend ul.addEventListener('transitionend', function() {// 无缝滚动if (index >= 3) {index = 0;// console.log(index);// 去掉过渡效果 这样让我们的ul 快速的跳到目标位置ul.style.transition = 'none';// 利用最新的索引号乘以宽度 去滚动图片var translatex = -index * w;ul.style.transform = 'translateX(' + translatex + 'px)';} else if (index < 0) {index = 2;ul.style.transition = 'none';// 利用最新的索引号乘以宽度 去滚动图片var translatex = -index * w;ul.style.transform = 'translateX(' + translatex + 'px)';}// 3. 小圆点跟随变化// 把ol里面li带有current类名的选出来去掉类名 removeol.querySelector('.current').classList.remove('current');// 让当前索引号 的小li 加上 current addol.children[index].classList.add('current');});// 4. 手指滑动轮播图 // 触摸元素 touchstart: 获取手指初始坐标var startX = 0;var moveX = 0; // 后面我们会使用这个移动距离所以要定义一个全局变量var flag = false;ul.addEventListener('touchstart', function(e) {startX = e.targetTouches[0].pageX;// 手指触摸的时候就停止定时器clearInterval(timer);});// 移动手指 touchmove: 计算手指的滑动距离, 并且移动盒子ul.addEventListener('touchmove', function(e) {// 计算移动距离moveX = e.targetTouches[0].pageX - startX;// 移动盒子: 盒子原来的位置 + 手指移动的距离 var translatex = -index * w + moveX;// 手指拖动的时候,不需要动画效果所以要取消过渡效果ul.style.transition = 'none';ul.style.transform = 'translateX(' + translatex + 'px)';flag = true; // 如果用户手指移动过我们再去判断否则不做判断效果e.preventDefault(); // 阻止滚动屏幕的行为});// 手指离开 根据移动距离去判断是回弹还是播放上一张下一张ul.addEventListener('touchend', function(e) {if (flag) {// (1) 如果移动距离大于50像素我们就播放上一张或者下一张if (Math.abs(moveX) > 50) {// 如果是右滑就是 播放上一张 moveX 是正值if (moveX > 0) {index--;} else {// 如果是左滑就是 播放下一张 moveX 是负值index++;}var translatex = -index * w;ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + translatex + 'px)';} else {// (2) 如果移动距离小于50像素我们就回弹var translatex = -index * w;ul.style.transition = 'all .1s';ul.style.transform = 'translateX(' + translatex + 'px)';}}// 手指离开的时候就重新开启定时器clearInterval(timer);timer = setInterval(function() {index++;var translatex = -index * w;ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + translatex + 'px)';}, 2000);});// 返回顶部模块制作var goBack = document.querySelector('.goBack');var nav = document.querySelector('nav');window.addEventListener('scroll', function() {if (window.pageYOffset >= nav.offsetTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}});goBack.addEventListener('click', function() {window.scroll(0, 0);})
})
</script>
JS 移动端网页特效(一)相关推荐
- JS 移动端网页特效(二)
案例: 2022年7月31日 周日学习记录博客 学习时长:4h.学习进度:移动端网页特效案例及知识扩展. 目录 移动端网页特效 3. 移动端常用开发插件 3.1 什么是插件 3.2 插件的使用 3.3 ...
- JS PC端网页特效 (一)
2022年7月27日 周三学习记录博客 学习进度:PC端网页特效(一).学习时长:6h. 目录 PC端网页特效 1.元素偏移量 offset 系列 1.1 offset 概述 1.2 offset ...
- js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
触屏事件 常见触屏事件: 触屏touch事件 说明 touchstart 手指触摸到DOM元素时触发 touchmove 手指在DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触 ...
- 05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
- 【第五部分 | JS WebAPI】6:PC端网页特效与本地存储
目录 | 概述 | PC端网页特效之三大系列 1-1 elementObj . offsetXXX 属性 1-2 elementObj . style 和 offset 的区别 1-3 案例:获取鼠标 ...
- javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
- 移动端、PC端 网页特效
移动端网页特效 标题触屏事件 移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 touch(也称触摸事件),A ...
- JavaScript-PC端网页特效
(五)PC端网页特效 [!TIP] 在前面学习了JS基础.DOM 和 BOM 的基本操作后,这部分主要学习这些知识的拓展应用. 1. 元素偏移量 offset 系列 1.1 offset 概述 off ...
- JavaScript之移动端网页特效与本地存储(57th)
一.移动端网页特效 1. 触摸事件 1.1 触屏事件概述 1.移动端浏览器兼容性较好,我们不需要考虑以前JS 的兼容性问题,可以放心的使用原生JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 ...
- PC端和移动端网页特效,fastclick插件,Swiper插件,Bootstrap等框架,本地存储
目录 PC 端网页特效 元素偏移量 offset 系列 1.offset 系列常用属性 2.offset 与 style 区别 3.计算鼠标在盒子内的坐标 4.模态框拖拽 5.京东商品放大镜 元素可视 ...
最新文章
- CRF算法中辅助概念 团 极大团 最大团
- 【数据算法】Java实现二叉树存储以及遍历
- python之setdefault()和defaultdict()处理缺失值的键
- Java新特性:数据类型可以扔掉了?
- 控制台应用程序转成MFC程序错误—OcrRec.exe触发一个触点,原因可能是堆被破坏
- MigrationSchemaMissing: Unableto createthe django_migrations
- asa 防火墙拦截了https_思科ASA防火墙下抓包方法
- 医院管理系统数据库设计
- 科利转债上市价格预测
- 通过.git/info/exclude文件配置忽略文件
- vim .bashrc编辑界面
- 进化计算原理和实现(遗传算法)
- matlab 颜色对应三原色(转)
- 团灭了3个月的线下营销,还有希望吗?
- html 获取语音时长,javascript – HTML5音频 – 获取声音对象的时间(howler.js)
- 直播短视频源码,身份证图片识别
- html版朋友圈模版之家,朋友圈图文模板
- Dense Contrastive Learning for Self-Supervised Visual Pre-Training(基于密集对比学习的自我监督视觉预训练)2021
- 为什么使用pnpm可以光速建立好用的monorepo(比yarn/lerna效率高)
- 解决“Fence桌面软件无法删除”的麻烦
热门文章
- 【软件工程】机房文档--可行性研究报告
- 帝国php本地安装教程,帝国CMS整站源码通用安装教程
- 能量原理与变分法笔记02:变分问题 变分和微分运算能交换次序 欧拉方程
- 家中闲置旧电脑改装家用NAS(入门教程)
- Dex.top“50计划”让DApp资产流动起来
- 超纯水工业水处理工程方案解析
- 罗格斯大学电气与计算机工程专业怎么样,罗格斯大学电气与计算机工程硕士专业...
- 鸿蒙系统开发实践--2.标准系统编译
- 推荐个边玩边学编程的游戏
- Android点阵屏效果的控件