移动端
httpkaidi
这个作者很懒,什么都没留下…
展开
-
移动端常用开发插件
移动端常用开发插件Swiper 插件(轮播图插件)Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 首先下载 Swiper 插件压缩包解压缩 找到文件夹里面的 demo 文件夹 从里面众多的html 文件里选取想要的样式,打开后右键点击页面,选择查看源码 从源码里查看需要引入的相关文件,例:<link rel="stylesheet" href="../package/swiper-bundle.min.css"> 根据路径在文件夹里查找然后引入 创建原创 2021-12-05 18:02:28 · 322 阅读 · 0 评论 -
移动端返回顶部功能
移动端返回顶部功能:滚动到某个地方显示事件 scroll 页面滚动事件代码:<style> * { height: 800px; } .nav { height: 200px; background-color: aquamarine; } .icon { display: none; float: right; width:原创 2021-12-05 18:00:11 · 456 阅读 · 0 评论 -
案例:移动端轮播图 / classList
移动端常见特效案例:移动端轮播图功能基本和pc端一致可以自动播放图片手指可以拖动播放轮播图自动播放功能开启定时器移动端移动,可以使用translate 移动可以添加过渡效果无缝滚动判断条件是:等到图片滚动完毕再去判断,就是过渡完成后判断此时需要添加过渡完成事件 transitionend判断条件:如果索引号为 3 (图片是3张 ,但实际添加的是5张 详情见代码),说明走到最后一张,此时索引号要复原为0此时图片去除过渡效果,然后移动如果索引号小于0 ,说明是倒着走,索引号等于2原创 2021-12-05 14:17:15 · 141 阅读 · 0 评论 -
移动端开发-触摸事件
移动端网页布局移动端浏览器兼容性较好,不需要考虑兼容性问题。触屏事件触屏touch事件 说明touchstart 手指触摸到一个DOM元素时触发touchmove 手指再一个DOM元素上滑动时触发touchend 手指从一个DOM上移开时触发触摸事件对象TouchEvent触摸列表 说明touches 正在触摸屏幕的所有的手指列表targetTouches 正在触摸当前元素DOM 元素的手指列表changedTouches 手指状态...原创 2021-12-04 15:05:41 · 128 阅读 · 0 评论