移动端
文章平均质量分 90
白菜new
这个作者很懒,什么都没留下…
展开
-
移动端事件(一)—— 移动端事件和对象
移动端事件(一)—— 移动端事件和对象在我们开始用原声JS写移动端轮播前,我们先了解一些移动端的基础。touch事件、touchEvents对象、滑屏的思想与实现移动端touch事件touchstarttouchmovetouchendlet box = document.querySelector("#box"); /* touchstart -->...原创 2020-04-02 17:30:31 · 241 阅读 · 0 评论 -
移动端事件(三)—— 横竖屏与加速度、移动的方块
orientationchange 监听横竖屏切换window.orientation 手机竖屏状态,有四个状态码。大家可以在真机尝试一下竖屏:0 180横屏: 90 -90<script> // alert(window.orientation) // orientationchange监听手机的横竖屏发生切换 window.addEven...原创 2020-04-04 21:23:26 · 216 阅读 · 0 评论 -
移动端事件(二)—— 移动端滑屏切换的幻灯片
经过昨天对移动端基础的了解,今天就来用原生JS实现一下我们的幻灯片。因为是用原生实现,所以本文篇幅较长,各位看官只需理解思路即可,代码部分可以粗略看看。毕竟我们有better-scroll这样封装好的框架能更快速实现效果。b( ̄▽ ̄)d首先根据我们昨天的滑屏操作,先将幻灯片的滑屏效果做出来。这里大家将照片地址更换成自己的就能得到效果。案例要在客户端才有效果哦,如果在PC端,网页中右键点审查...原创 2020-04-03 22:01:39 · 342 阅读 · 0 评论 -
移动端事件(四)—— 函数防抖和函数节流
函数防抖在对于函数高频次执行时,只执行一次。有两种情况:1.尾部执行:高频次触发时,只执行最后一次2.头部执行:高频次触发时,只执行第一次尾部执行实现很简单,先设一个定时器,一开始触发的时候我不执行,稍微延迟一会后再执行,当你下次执行时,我把上一次的定时器消失,这样就只会执行最后一次了。 //防抖尾部执行 let nub = 0; let timer = 0; bo...原创 2020-04-06 20:32:45 · 848 阅读 · 0 评论 -
移动端事件(五)—— 函数防抖和函数节流的封装
移动端事件(五)—— 函数防抖和函数节流的封装我们了解了函数防抖与函数节流的思路后,我们现在来将他们封装起来,提高代码复用性。cb 要处理防抖的函数 time 默认的高频间隔时间 isStart 是否在头部执行函数防抖封装:调用debounce 函数,返回一个处理过防抖的函数<!DOCTYPE html><html lang="en"><head&...原创 2020-04-08 22:55:28 · 171 阅读 · 0 评论