Jquery实现可拖动进度条
2024-06-12 22:16:55
效果图：
1.html中添加：
<div class="progress"><div class="progress_bg"><div class="progress_bar"></div></div><div class="progress_btn"></div><div class="text">0%</div>
</div>
2.添加css样式：
<style>.progress{position: relative; width:300px;margin:100px auto;}.progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}.progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}.progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff;left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}.progress_btn:hover{border-color:#F7B824;}
</style>
3.添加js事件：
<script>
$(function(){var tag = false,ox = 0,left = 0,bgleft = 0;$('.progress_btn').mousedown(function(e) {ox = e.pageX - left;tag = true;});$(document).mouseup(function() {tag = false;});$('.progress').mousemove(function(e) {//鼠标移动if (tag) {left = e.pageX - ox;if (left <= 0) {left = 0;}else if (left > 300) {left = 300;}$('.progress_btn').css('left', left);$('.progress_bar').width(left);$('.text').html(parseInt((left/300)*100) + '%');}});$('.progress_bg').click(function(e) {//鼠标点击if (!tag) {bgleft = $('.progress_bg').offset().left;left = e.pageX - bgleft;if (left <= 0) {left = 0;}else if (left > 300) {left = 300;}$('.progress_btn').css('left', left);$('.progress_bar').animate({width:left},300);$('.text').html(parseInt((left/300)*100) + '%');}});
});
</script>
4.完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery实现可拖动进度条</title>
<style>.progress{position: relative; width:300px;margin:100px auto;}.progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}.progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}.progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff;left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}.progress_btn:hover{border-color:#F7B824;}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="progress"><div class="progress_bg"><div class="progress_bar"></div></div><div class="progress_btn"></div><div class="text">0%</div>
</div>
<script>
$(function(){var tag = false,ox = 0,left = 0,bgleft = 0;$('.progress_btn').mousedown(function(e) {ox = e.pageX - left;tag = true;});$(document).mouseup(function() {tag = false;});$('.progress').mousemove(function(e) {//鼠标移动if (tag) {left = e.pageX - ox;if (left <= 0) {left = 0;}else if (left > 300) {left = 300;}$('.progress_btn').css('left', left);$('.progress_bar').width(left);$('.text').html(parseInt((left/300)*100) + '%');}});$('.progress_bg').click(function(e) {//鼠标点击if (!tag) {bgleft = $('.progress_bg').offset().left;left = e.pageX - bgleft;if (left <= 0) {left = 0;}else if (left > 300) {left = 300;}$('.progress_btn').css('left', left);$('.progress_bar').animate({width:left},300);$('.text').html(parseInt((left/300)*100) + '%');}});
});
</script>
</body>
</html>
Jquery实现可拖动进度条相关推荐
- python 视频播放 拖动_视频画中画效果，拖动进度条可以seek到相应视频帧显示
在视频开发中,我们常常看到这样的效果,拖动进度条时,或是在进度条上方或是在屏幕中间,显示拖动进度条位置时刻的某一帧画面. 这个需求,如果是你,你会如何做? 通常一个需求,不仅要考虑实现,还有考虑一些是 ...
- 【Android FFMPEG 开发】FFMPEG 视频播放进度控制 ( 显示播放进度 | 拖动进度条播放 )
文章目录 I . FFMPEG 播放进度控制 II . FFMPEG 播放视频 ( 效果展示 ) III . FFMPEG 获取视频时长 IV . FFMPEG 视频播放进度获取 V . FFMPEG ...
- 带锚点进度条android,Axure：实现可拖动进度条
原标题:Axure:实现可拖动进度条 怎样用Axure实现拖动进度条?一起来看下吧~ 可拖动进度条的应用场景,例如调节APP屏幕亮度,音乐播放器的音量等. 效果如下(●ˇ∀ˇ●) 准备4个元件,如下所 ...
- 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- 异常：谷歌浏览器video标签播放视频不能拖动进度条
谷歌浏览器video标签播放视频不能拖动进度条 当前端video的src不是直接使用视频文件的地址,而是通过后台下载接口返回文件流时,后台返回流因为没为response的header设置一些参数,会在 ...
- 关于前端video标签视频无法拖动进度条快进问题(Django)
因为后端返回的是视频的文件流,并不是视频文件地址.后端返回流的时候要为header设置一些参数,否则部分浏览器会出现问题(如Google Chrome...). django中常用返回文件流写法: c ...
- uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进
之前写了一篇文章 , 禁止快进的 , 但刚刚发现在uni-app中实现不了 , 所以又上网找别的方法,话不多说, 上代码 一 , template中 <video id="myVide ...
- vue-video-player 拖动进度条触发暂停移动端展示倍速菜单
一.安装 npm install vue-video-player --save 二. 组件内引入 import { videoPlayer } from 'vue-video-player' imp ...
- 【网页上视频无法拖动进度条，如何进行加速播放操作以及网页失焦后如何可继续播放】
面对网页视频无法加速时如何进行加速播放 遇到一 zhengzhi 刷题任务时 ,发现无法拖动进度条,也没有加速播放并且鼠标一失焦就会自动暂停时,让我乖乖看完是不可能,因此找了一个解决方案快速完成该任务 ...
- Video 全屏播放、禁止拖动进度条、禁止下载
全屏播放 ios:默认全屏播放模式,不做处理: 安卓:默认小屏播放模式,特殊处理,以下是实现代码: /** * @description 安卓全屏播放模式 * @video DOM节点 */ fu ...
最新文章
- 从实验角度来验证混沌数据可以被预测吗？
- Why am I getting this error “Expected resource of type raw” in Android Studio?
- 关于maven工程中一直报和依赖包json-lib-2.4-jdk15.jar相关错误的问题解决方法
- 火狐浏览器中添加selenium IDE步骤
- 【知识图谱】知识表示：知识图谱如何表示结构化的知识？
- 树莓派：挂载网络存储网络硬盘
- Linux清理磁盘挂载点方法(亲测有效)
- 【clickhouse】docker 下 搭建 clickhouse 监控
- matlab 构建数据集实用 api
- Oracle数户库、表导入导出
- alter在mysql_MySQL的alter的使用
- Go面试：用Go语言实现工厂模式 (Golang经典编程案例)
- Mac OSX 常用软件下载页面集锦（持续更新）
- NLP算法-情绪分析-snowNLP算法库
- 三菱plc恒压供水程序+威纶触摸屏程序本成已用于实际项目中
- 北京大学信科计算机学院教学计划,北京大学信息科学的技术学院.ppt
- 随机密码生成器 java
- html5怎么唤起支付宝支付,H5唤起支付宝支付
- 计算机视觉、模式识别、机器学习常用牛人主页链接
- mysql导入表空间太慢_Oracle 11g统计表空间使用率很慢
热门文章
- python高斯滤波和降噪_高斯滤波详解 附python和matlab高斯滤波代码
- JavaScript模块化编程(总结)
- 【动手撸深度学习】不吹不黑一份代码即可进Kaggle排行榜！
- deeping(linux)双系统windows启动界面花屏问题的完美解决。
- winhttp 访问https_asp程序使用Microsoft.XMLHTTP对象请求https时出错，使用WinHttp.WinHttpRequest.5.1解决...
- 笔记本电池检测工具 BatteryInfoView 汉化
- 基于 Direct3D 电子海图区域绘制方法
- Undo log日志详解
- 大一c语言常见编程题,大一c语言考试复习题
- 网络编程实验综合报告