0
0

webAPI中的触屏事件、轮播图、插件以及本地存储

一、触屏事件

1.触屏事件概述

移动端浏览器兼容性比较好，我们不需要考虑以前js的兼容性问题，我们可以放心的使用原生js写书效果，但是移动端也有自己的独特的地方。比如：触屏事件（touch） Android和ios都有

touch对象代表是一个触摸点，触摸点可以是一根手指，也可以是一根触摸笔，触屏事件可以响应手指（触控笔）对屏幕或者触控操作

2.常见的触屏事件

触屏事件说明touchstart手指触摸到一个DOM元素的时候触发touchmove手指在一个DOM元素上滑动的时候出发touchend手指从一个dom元素上移开的时候触发

3.触摸事件对象（touchEvent）

TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板）的状态变化事件。这类事件用于描述一个或多个触点，使得开发者可以检车触点的移动，触点的增加或减少等等
触摸列表说明touches正在触摸屏幕的所有手指的一个列表targetTouches正在触摸当前DOM元素上的手指的一个列表changedTouches手指状态发生了改变的列表，从无到有，从有到无的变化

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

二、移动端常见特效

1.移动轮播图

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

  • 可以自动播放图片
  • 手指可以拖动播放轮播图
window.addEventListener('load',function(){//alert(1);//1.获取元素var focus = document.querySelector('.focus');var ul = focus.children[0];//这是第一个子元素var ol = focus.children[1];//第二个子元素//获赠个div的宽度var w = focus.offsetWidth;var index =0;//图片的索引//2.利用定时器自动轮播图片var timer =setInterval(function(){
        index++;//索引加1var translateX =-index * w;//移动的距离
        ul.style.transition ='all .3s'//动画持续时间
        ul.style.transform ='translateX('+translateX+'px)';//移动的距离},2000);//等着我们过渡完成后，再去判断是否超过索引 // transitionend 事件在 CSS 完成过渡后触发。
    ul.addEventListener('transitionend',function(){if(index >=3){
            index =0;//如果超过了最大索引回到0所以，就是第一张图片
            ul.style.transition ='none'//动画持续时间var translateX =-index * w;//移动的距离
            ul.style.transform ='translateX('+translateX+'px)';//移动的距离}elseif(index <0){
            index =2;//如果小于最小的索引，就到最后一张图片
            ul.style.transition ='none'//动画持续时间var translateX =-index * w;//移动的距离
            ul.style.transform ='translateX('+translateX+'px)';//移动的距离}//3.小圆点跟着变化//把ol里面li带有current的类名选出来去掉类名，给当前的加上current
        ol.querySelector('.current').classList.remove('current');//大家也可以用排他，全部干掉//让当前的索引号的小li加上current
        ol.children[index].classList.add('current');});//4.手指滑动轮播图//通过触摸元素（touchstart）：获取手指初始位置坐标var startX =0;var startY =0;//添加手指触摸事件
    ul.addEventListener('touchstart',function(e){
        startX = e.targetTouches[0].pageX;//手指摸到轮播图，那么就该停止轮播(停止定时器)clearInterval(timer);});var moveX =0;//在手指离开后我们要用这个距离做计算var flag =false;//如果用户手指移动过，我们再去判断是否要做判断效果//移动手指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 .3s'//动画持续时间
                ul.style.transform ='translateX('+translateX+'px)';//移动的距离}}//手指离开的时候重新开启定时器clearInterval(timer);
        timer =setInterval(function(){
            index++;//索引加1var translateX =-index * w;//移动的距离
            ul.style.transition ='all .3s'//动画持续时间
            ul.style.transform ='translateX('+translateX+'px)';//移动的距离},2000);});});

2.返回顶部

//返回顶部模块var goBack =this.document.querySelector('.goBack');var nav =this.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.scrollTo(0,0);});

3.classList属性

classList属性是HTML5新增的一个属性，返回元素的类名

该属性用于元素中添加、移除以及切换css类

3.1 添加类

//语法
element.classList.add('类名');

//如：
focus.classList.add('current');

3.2 移除类

//语法
element.classList.remove('类名');

//如：
focus.classList.remove('current');

3.3 切换类

//语法
element.classList.toggle('类名');

//如：
focus.classList.toggle('current');

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02classList属性</title><style>.bg{
            background-color: black;}</style></head><body><div class="one two three">123</div><button>开关灯</button><script>//classList返回的是元素的类名var div = document.querySelector('div');
        console.log(div.classList[1]);//1.添加类选择器
        div.classList.add('abc');//2.删除类名
        div.classList.remove('one');//3.切换类var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            document.body.classList.toggle('bg');})</script></body></html>

4.click延时解决方案

移动端click事件都会有300ms的延时。原因是移动端屏幕双击会缩放页面。

解决方案：

  • 进制缩放，浏览器禁用默认双击缩放行为可以去掉300ms的点击延迟- <meta name="viewport" content="user-scalable=no">
  • 利用touch事件自己封装这个事件解决300ms延迟- 原理： - 当我们手指触摸屏幕，记录当前触摸事件- 当我们的手指离开屏幕，用离开的事件减去触摸的事件- 如果时间小于150ms，并且没有滑动过屏幕，那我们就定义为点击
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03使用插件解决延迟300ms问题</title><script src="fastclick.js"></script></head><body><div>123</div><script>if('addEventListener'in document){
            document.addEventListener('DOMContentLoaded',function(){
                FastClick.attach(document.body);},false);}var div = document.querySelector('div');
        div.addEventListener('click',function(){alert(1111111);});</script></body></html>

三、移动端开发常用开发插件

1.什么是插件

移动端要求的是快速开发，所以我们经常借助一些插件来帮助我们完成操作。

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

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

fastclick.js就属于一个插件

2.插件的使用

  • 第一步：引入js文件
  • 按照规定的语法使用
if('addEventListener'in document){
    document.addEventListener('DOMContentLoaded',function(){
        FastClick.attach(document.body);},false);}

3.Swiper

官网：https://swiper.com.cn/

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04swiper轮播图</title><link rel="stylesheet" href="swiper/swiper-bundle.css"><style>.swiper {
            width:600px;
            height:300px;}.swiper img{
            width:100%;
            height:100%;}.swiper-slide{
            width:300px;/*设为固定值*/
            width:auto;/*根据内容调整宽度*/}</style></head><body><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="images/focus1.jpg" alt=""></div><div class="swiper-slide"><img src="images/focus2.jpg" alt=""></div><div class="swiper-slide"><img src="images/focus3.jpg" alt=""></div><div class="swiper-slide"><img src="images/focus4.jpg" alt=""></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><div class="swiper-scrollbar"></div></div><script src="swiper/swiper-bundle.min.js"></script><script>var mySwiper =newSwiper('.swiper',{
          autoplay:{//自动播放相关
            delay:1000,
            stopOnLastSlide:false},//slidesPerView : 3, 
          effect:'coverflow',
            slidesPerView:3,
            centeredSlides:true,//direction: 'vertical', // 垂直切换选项
          loop:true,// 循环模式选项// 如果需要分页器
          pagination:{
            el:'.swiper-pagination',},// 如果需要前进后退按钮
          navigation:{
            nextEl:'.swiper-button-next',
            prevEl:'.swiper-button-prev',},// 如果需要滚动条
          scrollbar:{
            el:'.swiper-scrollbar',},})</script></body></html>

4.media

移动端视频框架

framework：框架。它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05视频插件</title><link rel="stylesheet" href="media/zy.media.min.css"></head><body><div class="playvideo"><div class="zy_media"><video poster="bx.png" data-config='{"mediaTitle": "《疯狂动物城》--腾讯视频"}'><source src="media/mov.mp4" type="video/mp4">
                    您的浏览器不支持HTML5视频
            </video></div></div><script src="media/zy.media.min.js"></script><script>zymedia('video',{
            autoplay:true,
            alwaysShowControls:false});</script></body></html>

四、本地存储

1.概念

随着互联网的快速发展，基于网页的应用越来越多，同时也变得复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5规范提出了相应的解决方案

  • 数据存储在用户的浏览器中
  • 设置、读取方便、甚至页面刷新都不丢失数据
  • 容量较大。sessionStroage约5M，localStorage约20M
  • 只能存储字符串，可以将对象JSON.stringif() 编码后存储

2.sessionStorage

  • 生命周期为关闭浏览器窗口
  • 在同一个窗口（页面）下数据可以共享
  • 以键值对的形式存储使用 （name:‘张三’）

2.1 存储数据的语法

sessionStorage.setItem(key,value);

2.2 获取数据的语法

sessionStorage.getItem(key);

2.3 删除数据

sessionStorage.removeItem(key);

2.4 清空所有数据

sessionStorage.clear()

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06本地存储-sessionStorage</title></head><body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="removeAll">删除全部数据</button><script>var input = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var removeAll = document.querySelector('.removeAll');//添加数据
        set.addEventListener('click',function(){//点击按钮后，将数据存储到sessionStorage中var val = input.value;
            sessionStorage.setItem('username',val);});//获取数据
        get.addEventListener('click',function(){//点击按钮后，将数据从sessionStorage中取出var val = sessionStorage.getItem('username');
            console.log('从sesisonStorage中取出的key是username的值：'+ val);});//删除数据
        remove.addEventListener('click',function(){//点击按钮后，将数据从sessionStorage中删除
            sessionStorage.removeItem('username');});//删除全部数据
        removeAll.addEventListener('click',function(){//点击按钮后，将数据从sessionStorage中全部数据删除
            sessionStorage.clear();});</script></body></html>

3.localStorage

  • 生命周期永久生效，除非手动删除，否则关闭页面也会存在
  • 可以多个窗口（页面）共享同一个数据（同一个浏览器的多个窗口可以共享数据）
  • 以键值对的形式存储数据

3.1 存储数据

localStorage.setItem(key,value);

3.2 获取数据

localStorage.getItem(key);

3.3删除数据

localStorage.removeItem(key);

//清空所有数据
localStorage.clear();

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07本地存储-localStorage</title></head><body><div>
        用户名：<input type="text" id="username"><br/>
        密码：<input type="text" id="pwd"></div><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="removeAll">删除全部数据</button><script>var username = document.querySelector('#username');var password = document.querySelector('#pwd');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var removeAll = document.querySelector('.removeAll');//添加数据
        set.addEventListener('click',function(){//点击按钮后，将数据存储到localStorage中var name = username.value;var pwd = password.value;
            localStorage.setItem('username',name);
            localStorage.setItem('pwd',pwd);});//获取数据
        get.addEventListener('click',function(){//点击按钮后，将数据从localStorage中取出var name = localStorage.getItem('username');
            console.log('从localStorage中取出的key是username的值：'+ name);var pwd = localStorage.getItem('pwd');
            console.log('从localStorage中取出的key是pwd的值：'+ pwd);});//删除数据
        remove.addEventListener('click',function(){//点击按钮后，将数据从localStorage中删除
            localStorage.removeItem('pwd');});//删除全部数据
        removeAll.addEventListener('click',function(){//点击按钮后，将数据从localStorage中全部数据删除
            localStorage.clear();});</script></body></html>
标签： 开发语言 前端
本文转载自: https://blog.csdn.net/qq_63946637/article/details/143186742
版权归原作者 努力变厉害的小超超 所有， 如有侵权，请联系我们删除。
登录后发布评论

“webAPI中的触屏事件、轮播图、插件以及本地存储”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航