js---PC端滑动进度条

这个是PC端的滑动进度条效果：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.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>
</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 type="text/javascript" src="./js/jquery-1.8.3.min.js"></script><script type="text/javascript">$(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>

转载于:https://www.cnblogs.com/e0yu/p/10328601.html

js---PC端滑动进度条相关推荐

html5里可移动线性进度条的类型怎么表示,HTML5触摸事件实现移动端简易进度条的实现方法...
这篇文章主要介绍了关于HTML5触摸事件实现移动端简易进度条的实现方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下前言 HTML中新添加了许多新的事件,但由于兼容性的问题,许多事件 ...
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
原生JS实现加载进度条
分享一个原生JS实现的动态加载进度条特效,效果如下: 实现的代码如下: <!DOCTYPE html> <html><head><meta http-equi ...
网易云歌词居中滚动、点击/滑动进度条对应滚动、当前播放歌词高亮
当前播放歌词高亮:根据当前播放时间,和歌词时间对比,获得当前歌词行数索引正常居中滚动.点击/滑动进度条对应滚动:(1)因为这几种方式都是改变当前播放时间,所以只需要根据当前播放时间操作即可(2)根据当 ...
小程序scroll-view 实现两行滑动金刚区，滑动进度条
业务需要,需要做一个两行可滑动的金刚区展示模块,效果图如下: 代码如下: <view class="second-module-al ...
JS PC端网页特效（一）
2022年7月27日周三学习记录博客学习进度:PC端网页特效(一).学习时长:6h. 目录 PC端网页特效 1.元素偏移量 offset 系列 1.1 offset 概述 1.2 offset ...
Vue.js——PC端和移动端样式适配方案
此方案整合了断点响应式样式,和移动端样式重分配. 前言最近在学习Vue的项目架构,查询了很多移动端样式适配,整合了一下我自己的适配方案做一个记录,可能不是最好的,但我自己用着还蛮顺手的~欢迎大家补充 ...
JS video 禁止拖动进度条
需要实现一个效果,视频加载的过程中禁止拖动进度条快进. 开始呢我想着把控件禁掉,自动播放解决. <video id="video" src="http://kuan ...
Android自定义滑动进度条,Android自定义View实现圆形水波进度条
每次听到某大牛谈论自定义View,顿时敬佩之心,如滔滔江水连绵不绝,心想我什么时候能有如此境界,好了,心动不如行动,于是我开始了自定义View之路,虽然过程有坎坷,但是结果我还是挺满意的.我知道大牛还 ...

js---PC端滑动进度条

js---PC端滑动进度条相关推荐

最新文章

热门文章