笔记--移动端事件，特效，插件，框架

最新推荐文章于 2023-03-23 21:34:22 发布

若梦丶忆流年

最新推荐文章于 2023-03-23 21:34:22 发布

阅读量257

点赞数 1

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_43488583/article/details/123458054

版权

本文介绍了移动端开发中的触屏事件，包括触摸事件对象和移动端元素拖动，详细讲解了如何使用classList属性操作DOM元素的类。接着，针对click延迟问题提出了三种解决方案，并探讨了移动端开发常用的Swiper插件和其他插件的使用。此外，文章还详细阐述了zy.media.js视频插件的集成步骤和参数设置。最后，简单概述了移动端开发框架Bootstrap的应用。

摘要由CSDN通过智能技术生成

1. 触屏事件

1.1 触屏事件概述

在这里插入图片描述

1.2 触摸事件对象（TouchEvent）

在这里插入图片描述

1.3 移动端拖动元素

在这里插入图片描述

2. 移动端常见特效

在这里插入图片描述

classList 属性

在这里插入图片描述

<body>
    <div class="one two"></div>
    <button>点击</button>
    <script>
        var div = document.querySelector('div');
        // 添加类
        div.classList.add('three');
        // 删除类
        div.classList.remove('one');
        // 打印所有类
        console.log(div.classList);
        // 切换类
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            div.classList.toggle('bg');
            console.log(div.classList);

        })
    </script>
</body>

在这里插入图片描述

2.2 click延时解决方案（三种方法）

在这里插入图片描述

3. 移动端开发常用插件

3.1 什么是插件

在这里插入图片描述

3.2 插件的使用

1. 首先引入.js插件文件
2. 根据插件使用说明进行使用

3.3 Swiper插件的使用

在这里插入图片描述

3.4 其他移动端常用插件

在这里插入图片描述

3.5 插件使用总结

在这里插入图片描述

3.6 移动端视频插件zy.media.js

在这里插入图片描述

1. 地址https://github.com/ireaderlab/zyMedia
2. 引入样式文件zy.media.css和js文件zy.media.js
3. 输入html结构，例如视频，其中video标签的data-config属性用于设置参数，

<div class="zy_media">
<video poster="test.jpg" data-config='{"mediaTitle": "《疯狂动物城》--腾讯视频"}'>
<source src="test.mp4" type="video/mp4">
您的浏览器不支持HTML5视频
</video>
</div>

4. 绑定媒体节点，zymedia是一个全局对象，可重复调用，不返回视频实例，需要的话建议
直接获取视频和监听相应事件，第二个参数是用于批量设置视频参数，示例:

zymedia('video');
// zymedia('video', {...参数});

zymedia是做批量处理用的，单独设置用每个音视频上的data-config，
每个音视频的src可随时替换（比如document.querySelector('video').src = 'test.mp4'），容器尺寸会保持不变

参数说明：

参数说明
type: ''
指定媒体类型，默认空

mediaTitle: ''
设置媒体标题，默认空，不展示

nativeControls: false
强制用原生的播放控制器，默认不使用，true为使用

autoplay: false
是否自动播放，默认否，true为自动播放

preload: 'none'
是否预加载，默认关闭，和原生preload对应，其他值为metadata|auto|''

videoWidth: '100%'
指定视频宽，默认100%

videoHeight: 'auto'
指定视频高，默认auto

aspectRation: (16 / 9)
指定视频宽高比，默认16:9

audioWidth: '100%'
指定音频宽，默认100%

audioHeight: 44
指定音频高，默认44px

autoLoop: false
是否循环播放，默认否，true为无限循环

timeFormatType: 1
时间格式类型，默认mm:ss，2为m:s

alwaysShowHours: false
是否强制显示小时位，默认否，true为显示

alwaysShowControls: false
是否始终显示控制栏，默认否，自动隐藏，true为始终显示

hideVideoControlsOnLoad: false
加载时是否隐藏视频控制栏，默认否，true为隐藏

enableFullscreen: true
是否显示全屏按钮，默认显示，false为不显示

pauseOtherPlayers: true
是否播放唯一，默认唯一，播放时将暂停其他播放实例，false为不唯一

enableVisibilityState: true,
是否页面不可见时暂停当前所有播放，默认暂停

duration: 0
指定媒体时长，默认0

success: null
实例化成功时的回调，默认无

error: null
实例化错误时的回调，默认无

beforePlay: null
点击播放前的交互，默认无，如果函数返回true，将不播放视频