jquery播放进度条，可调节速度，拖拽、点击改变进度

最新推荐文章于 2024-06-05 10:04:13 发布

杨梅先生

最新推荐文章于 2024-06-05 10:04:13 发布

阅读量2.3k

点赞数 1

分类专栏： jquery插件文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_40188710/article/details/103208080

版权

这篇博客介绍了如何创建一个jQuery播放进度条，支持调节播放速度、通过拖拽和点击改变进度。作者提供了详细的使用说明、选项、方法，并分享了简洁的源代码，适用于需要自定义进度条功能的场景。

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

首篇csdn博客，以前一直潜水状态，也不想发水文，也懒得发，今天勤奋一回

前言

业务需要有没有找到合适的轮子，干脆自己造一个

以下代码使用了es6；所以对兼容性有要求需要转es5;

目前代码没有发现严重的bug，有错再改；代码还算简洁（自我感觉），还有可优化的空间

播放，暂停，速率控件都未实现（我是不爱写ui的前端....）

使用

// 创建实例 $.playBar(options)
var bar = $.palyBar({
            el: '.con',
            duration: 1200,
        });
  bar.play()

选项 (options)

el 父容器选择器或者元素

width 进度条宽度默认500px

duration 播放总时长 /s

speed 初始速率默认 1

onPause 暂停时触发

onMoveProcent 仅移动进度条时触发参数：进度百分比

onProgress 进度更新时触发参数进度百分比

onPlay 播放时触发

方法

play () 播放

pause（）暂停播放

resure() 重置播放

replay（）重新播放

setSpeed （speed）设置速率 1-6，缺省 1

setProgress（procent）设置播放进度；百分比

代码

献上我的意大利式代码,尽管找问题；复制粘贴可用

<!--
* @file: palyBar.html
* @description: playBar
* @time: 2019/11/22 21:29:06
* @auth: ysea
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>意大利面条</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

</head>
<style>
    .play-bar {
        width: 100%;
    }

    .play-bar>div {
        display: inline-block;
    }

    .play-bar>.bar {
        height: 4px;
        background-color: #ccc;
        position: relative;
        width: 100%;
        margin: 0 10px;
    }

    .play-bar>.bar>.progress {
        height: 100%;
        background-color: red;
        /* transition: width .1s; */
    }

    .play-bar>.bar>.ball {
        position: absolute;
        top: -4px;
        width: 10px;
        height: 10px;
        background: #666;
        cursor: pointer;
        transform: translateX(-50%);
        /* transition: left .1s; */

    }

    .begin-time {
        text-align: right;
    }

    .begin-time,
    .end-time {
        /* margin: 0 10px; */
        min-width: 100px;
        height: 1em;
        line-height: 1em;
        color: #666;
    }
</style>

<

最低0.47元/天解锁文章

杨梅先生

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery播放进度条，可调节速度，拖拽、点击改变进度

首篇csdn博客，以前一直潜水状态，也不想发水文，也懒得发，今天勤奋一回前言业务需要有没有找到合适的轮子，干脆自己造一个以下代码使用了es6；所以对兼容性有要求需要转es5;目前代码没有发现严重的bug，有错再改；代码还算简洁（自我感觉），还有可优化的空间播放，暂停，速率控件都未实现（我是不爱写ui的前端....）使用// 创建实例 $.playBar(o...
复制链接

扫一扫

专栏目录