h5手动滑动进度条效果（移动端）

最新推荐文章于 2024-09-07 11:25:38 发布

小雷雷哥哥

最新推荐文章于 2024-09-07 11:25:38 发布

阅读量1.2w

点赞数 3

分类专栏： JavaScript 文章标签： javascript 进度条效果滑动效果

本文链接：https://blog.csdn.net/leileibrother/article/details/78672064

版权

本文介绍了如何使用原生JavaScript和H5的touchmove事件创建手动滑动进度条效果。通过设置元素的相对和绝对定位，并监听触摸移动事件，动态计算并更新红色圆点的位置，确保其在黑色区域内流畅滑动。代码已在安卓和苹果设备上测试，表现良好。

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

公司项目需要在手机上做手动滑动进度条的效果（移动端），自己琢磨了一下，用原生js和h5的touchmove事件写了这个效果，可以参考一下，先看看效果图。

红色的圆点可以在黑色区域任意滑动。全部代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--为移动设备添加 viewport-->
        <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小雷雷哥哥

关注关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

高级前端工程师

04-10

3610

uniapp，h5网页，安卓苹果app，nvue，微信小程序，支付宝小程序，video，视频播放器，视频，视频组件，如何禁用快进和快退，uniapp视频组件怎么禁止用户拖动进度条，uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进，uniapp视频播放器，uniapp视频播放防止用户快进，uni-app视频禁止快进，uniapp如何让视频无法快进，uniapp video禁止快进，uniapp video视频未播放完成禁止拖拽进度条快进，uni小程序video视频禁止拖动进度条新，uniAp

mui h5+文档最详版

zxd的博客

12-10

1万+

mui h5+文档最详版界面初始化H5plus初始化创建子页面打开界面参数传递控制页面load显示关闭界面底部导航切换界面自定义事件页面预加载消息框原生模式ActionSheet下拉刷新上拉加载上拉下拉整合手势遮罩滑动导航选择图片轮播自定义导航Ajax-get请求Ajax-post请求照相机访问相册蜂鸣提示音手机震动弹出菜单设备信息手机信息发送短信拨打电话发送邮件本地存储图片上传地理位置设置IOS...

3 条评论您还未登录，请先登录后发表或查看评论

H5 移动端拖拽进度条

u013611033的博客

02-19

792

最近业务需要移动移动端可拖拽的进度条,用来做音乐播放器,简单研究了一下 <div class="bar_wrap" id="wrap"> </div> css .bar_wrap{ // width: 100%; background-color: aliceblue; // height: 20px; margin-top: 20px; } /** * name 元素选择器 string * w.

移动端H5开发 (滑动事件)

dianjie2799的博客

04-04

619

　　最近一直在做手机App H5的开发，在开发过程中，经常会遇到很多滑动事件，写个demo，分享自己的一些写法。（如写的不好，轻喷!）　　直接贴代码　　html css代码　 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>touch ...

通过HTML/CSS 实现各类进度条的功能。

qq_44552416的博客

07-19

3475

需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用。通过本文学习我们会明白如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式。

H5 用滑块控制进度条

m0_53166050的博客

12-03

487

监听滑动条的变化然后控制进度条的进度

h5：移动端 ：div横向滚动，小滚动条（双滚动条同步）

Lycoris_Red的博客

11-08

3924

移动端，横向滚动的时候，希望有个小滚动条标志一下，说明是可以左右滑动的。不是直接左右滑动切换页面，而是div左右滑动。效果如移动掌上营业厅这般。下面蓝色的是个滚动条实现思路： 1、可以左右滑动的放内容的div1 下方专门用来做滚动条的div2 2、隐藏div1的滚动条，显示div2滚动条 3、滚动条同步，实现上面div1滑动，下面div2滚动条滚动 <!...

H5手机端滑动切换效果

CodingNoob

04-01

4499

最近在研究H5的动画，于是简单实现了相应的手机端触摸切换画面效果，具体代码如下：最终效果：实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&quo

H5--大概的,没事看看

weixin_44462907的博客

03-20

633

1.设置弹性盒任何元素都可以设置 display:flex; display:inline-flex //给行内元素设置弹性盒子 display:-webkit-flex; //webkit(是浏览器的内核，是谷歌浏览器和safari(苹果浏览器)的内核) display:-webkit-flex //谷歌浏览器和safari(苹果浏览器)的内核 display:-moz-flex...

uni-app-video(支持后台播放音频的视频播放器).zip

10-16

3. **自定义控制**：开发者可以自定义视频播放的控制界面，包括播放、暂停、进度条、音量调节等功能，以满足各种应用场景的需求。 4. **事件监听**：uni-app-video提供了丰富的事件监听接口，如play、pause、ended...

js 移动端 进度条

04-13

这个进度条适合在移动端的H5页面，可以自定义实现，只要在页面加入以下html代码即可 50%

js实现移动端H5页面手指滑动刻度尺功能

12-13

写了一个在移动端使用的可滑动刻度尺，曾经在原生App中看到过，做得很精细，现在用web页面实现的；　　实现效果如下：（源码见文章的最后）　　　　封装成直接可用的MeasureRuler.js 　　　　调用方法： //初始化尺子 var measureRuler =new MeasureRuler({ 　　　　 wrapperId:"rulerWrapper", //容器ID，页面中写一个DIV就行 (必须) 　　　　 max:2000, //刻度尺最大的刻度 (非必须，默认为2000) 　　　　 minUn

html5 移动端滑动效果,移动端 H5 滑动穿透（完美解决）

weixin_36345268的博客

06-04

1011

之前写的是用jq写的过时了被我删除了现在的这个方法比较完善说的再多不如复制运行看一下效果吧image.pngscroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。针对此类高频度触发事件问题(例如页面 scroll ，屏幕 resize，监听用...

H5视频播放，左右滑手势控制播放进度。

qq_37231097的博客

07-05

5990

水平有限，这篇文章中对H5视频播放做了简单的搭建。因产品经理要求，加入了手势控制，左滑后退播放10秒，右滑快进10秒。因为上下滑动可能会影响页面的滑动，如果用到iscroll或者batterscorll等插件更需要小心谨慎。固未添加控制音量的上下滑动事件。下面这段代码主要是css部分和一个video标签。<!DOCTYPE html> <html lang="en"> <head> <met

H5滑条(input type=range)

weixin_30508241的博客

11-14

240

input[type=range] { -webkit-appearance: none; width: 230px; border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/ display: block; margin: 0 auto; margin-top: 20px;}input[type=range]::-webkit-...

H5 页面上下滑动切换：实现流畅的移动端页面翻页效果