JavaScript实现水平进度条拖拽效果
更新时间：2021年10月19日 16:28:18 作者：秋天1014童话
这篇文章主要为大家详细介绍了JavaScript实现水平进度条拖拽效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享水平进度条拖拽效果的js具体代码，供大家参考，具体内容如下
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
margin:100px;
width: 500px;
height: 5px;
background: #ccc;
position: relative;
}
.bar{
width: 10px;
height: 20px;
background: #369;
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
}
.mask{
position: absolute;
left: 0;
top: 0;
background: #369;
width: 0;
height: 5px;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<div class="bar" id="bar">
</div>
<div class="mask" id="mask"></div>
</div>
<p></p>
<script>
var scroll = document.getElementById('scroll');
var bar = document.getElementById('bar');
var mask = document.getElementById('mask');
var ptxt = document.getElementsByTagName('p')[0];
var barleft = 0;
bar.onmousedown = function(event){
var event = event || window.event;
var leftVal = event.clientX - this.offsetLeft;
var that = this;
// 拖动一定写到 down 里面才可以
document.onmousemove = function(event){
var event = event || window.event;
barleft = event.clientX - leftVal;
if(barleft < 0)
barleft = 0;
else if(barleft > scroll.offsetWidth - bar.offsetWidth)
barleft = scroll.offsetWidth - bar.offsetWidth;
mask.style.width = barleft +'px' ;
that.style.left = barleft + "px";
ptxt.innerHTML = "已经走了" + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 100) + "%";
//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
document.onmouseup = function(){
document.onmousemove = null; //弹起鼠标不做任何操作
}
</script>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)
javascript简单拖拽，简单拖拽实现2012-05-05
这篇文章主要为大家详细介绍了JavaScript代理和代理的使用的方法，感兴趣的小伙伴们可以参考一下，希望能给你带来帮助2021-08-08
继续上一部分，我们要看一下颜色。火狐好像不管三七二十一都会转变为rgb格式，不过我们通常比较习惯的是hex格式。这就用到以下两函数。2010-01-01
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
这篇文章主要介绍了JavaScript实现的冒泡排序法及统计相邻数交换次数,结合实例形式分析了javascript冒泡排序的实现技巧及针对交换次数的统计方法,便于更直观的了解冒泡排序算法,需要的朋友可以参考下2017-04-04
本文给大家汇总介绍了javascript格式化日期时间的几种常用方法，个人对最后一种个性化输出时间比较有兴趣，基本上只要项目中能用到都是使用这种，推荐给小伙伴们。2015-10-10
这篇文章主要介绍了gulp-htmlmin压缩html的gulp插件实例代码的相关资料,需要的朋友可以参考下2016-06-06
在使用eval生成JSON对象时，一定要注意添加一对圆括号2010-09-09
Object instanceof Function 还是 Function instance of Object，是真是假，一一道来2010-01-01
Bootstrap中的fileinput 多图片上传及编辑功能
这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能的实现,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了PHP中使用微秒计算脚本执行时间例子,本文先是讲解了microtime函数的一些知识,然后给出了一个计算脚本运行时间的类,需要的朋友可以参考下2014-11-11
最新评论