1000字范文 > [JS-DOM BOM学习笔记]移动端网页特效导读

[JS-DOM BOM学习笔记]移动端网页特效导读

时间：2022-12-15 23:42:50

移动端网页特效

导读触屏事件触屏事件概述触摸事件对象(TouchEvent)移动端拖动元素移动端常见特效移动端轮播图返回顶部click延时解决方案移动端常用开发插件什么是插件Swiper插件的使用其他移动端常见插件插件的使用总结练习-移动端视频插件 zy.media.js 移动端常用开发框架框架概述Bootstrap

导读

能够写出移动端触屏事件能够写出常见得移动端特效能够使用移动端开发插件开发移动端特效能够使用移动端开发框架开发移动端特效

触屏事件

触屏事件概述

移动端浏览器兼容性好，我们补需要考虑以前JS得兼容性问题，可以放心得使用原生JS书写效果，但是移动端也有自己独特得地方，比如触屏事件touch(也称触摸事件)，Android和IOS都有。

touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕时间如下：

触摸事件对象(TouchEvent)

TouchEvent是一类描述手指在触摸平面(触摸屏，触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

touchstart，touchmove，touchend三个事件都会各自有事件对象。

因为平时我们都是给元素注册触摸事件，所以重点记住targetTouches

移动端拖动元素

1.touchstart，touchmove，touchend可以实现拖动元素2.但是拖动元素需要当前手指的坐标值，我们可以使用targetTouches[0]里面的pageX和pageY3.移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离4.手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三部曲：

1.触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置2.移动手指touchmove：计算手指的滑动距离，并且移动盒子3.离开手指touchend

注意：手指移动也会触发滚动屏幕所以这里要组织默认的屏幕滚动e.preventDefault()；

// （1）触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置// （2）移动手指 touchmove：计算手指的滑动距离，并且移动盒子// （3）离开手指 touchend:var 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(); // 阻止屏幕滚动的默认行为});

移动端常见特效

移动端轮播图

移动端轮播图功能和PC端基本一致。

1.可以自动播放图片2.手指可以拖动播放轮播图

返回顶部

// 返回顶部模块制作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);})

click延时解决方案

移动端click事件会有300ms的延时，原因使移动端屏幕双击会缩放(double tap to zoom)页面。

解决方案：

1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。

<meta name="viewport" content="user-scalable=no">

2.利用touch事件自己封装这个事件解决300ms延迟。

原理就是：1.当我们手指触摸屏幕，记录当前触摸事件2.当我们手指离开屏幕，用离开的事件减去触摸的时间3.如果时间小于150ms，并且没有滑过屏幕，那么我们就定义为点击

移动端常用开发插件

什么是插件

移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我们完成操作，那么什么是插件呢？

JS插件时js文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。

特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

比如写的animate.js也算是一个最简单的插件

fastclick插件解决300ms延迟，使用延时

GitHub官网地址：fastclick插件

Swiper插件的使用

中文官网地址：Swiper官网

1.引入插件相关文件2.按照规定语法使用

其他移动端常见插件

superslide： superslide官网iscroll：iscroll-GITHUB地址

插件的使用总结

1.确认插件实现的功能2.去官网查看使用说明3.下载插件4.打开demo实例文件，查看需要引入的相关文件，并且引入5.复制demo实例文件中的结构html，样式css以及js代码

练习-移动端视频插件 zy.media.js

H5给我们提供了video标签，但是浏览器的支持情况不同。

不同的视频格式文件，我们可以通过source解决。

但是外观样式，还有暂停，播放，全屏等功能我们智能自己写代码解决。

这个时候我们可以使用插件方式来制作。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="zy.media.min.css"><script src="zy.media.min.js"></script><style type="text/css">#modelView {background-color: #DDDDDD;z-index: 0;opacity: 0.7;height: 100%;width: 100%;position: relative;}.playvideo {padding-top: auto;z-index: 9999;position: relative;width: 300px;height: 200px;}.zy_media {z-index: 999999999}</style></head><body><div class="playvideo"><div class="zy_media"><video data-config='{"mediaTitle": "小蝴蝶"}'><source src="mov.mp4" type="video/mp4">您的浏览器不支持HTML5视频</video></div><div id="modelView"> </div></div><script>zymedia('video', {autoplay: false});</script></body></html>