效果图
特效分析
HTML
1、外层大的div
2、灰色底条
3、灰色上有橙色进度条进度部分
4、橙色方条前面有一个小块
5、还有进度百分比
<div id="progress">
<div id="bar">
<div id="front"></div>
<span></span>
</div>
<div id="Value">0%</div>
</div>
CSS
1、由于橙色进度条和拖动块,都在灰色条上,所以使用定位。设置好初始位置
2、灰色底条边框、橙色条边框、以及拖动块边框需要调整样式
3、当鼠标在拖动块上时,cursor为pointer
*{
margin: 0;
padding: 0;
border: none;
list-style: none;
}
#progress{
width: 1000px;
height: 35px;
line-height: 35px;
background-color: #e8e8e8;
margin: 100px auto;
position: relative;
}
#bar{
width: 900px;/*预留文字*/
height: 100%;
background-color: #ccc;
border-radius: 8px;
position: relative;
}
#Value{
position: absolute;
right: 30px;
top: 0px;
}
#front{
width: 0px;
height: 100%;
background-color: orangered;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
span{
width: 25px;
height: 50px;
background-color: orangered;
position: absolute;
left: 0px;
top: -7px;
border-radius: 5px;
cursor: pointer;
}
JS
事件分析:
1、鼠标按住拖动块进行移动:onmousedown
(按住)onmousemove
(移动)。移动事件在按住事件中进行。
2、鼠标松开,进度条不动:onmouseup
事件触发时改变:
1、在鼠标移动时,拖动块跟着移动。
且拖动块只能在灰色底条的范围内移动。
鼠标移动时,橙色进度条的宽度也会改变。
百分比随着鼠标的移动按照比例发生改变。
2、鼠标抬起时,鼠标的移动事件关闭。
事件源:
1、橙色进度条(front)
2、橙色拖动块(mask)
3、百分比(Value)
要求的值:
1、鼠标移动时的位置。
3、在初始位置时拖块的位置
2、以及鼠标点击后移动的距离初始位置的长度
4、最后把鼠标移动之后的长度给橙色进度条的width
5、然后用块条的距离值/(橙色进度条-橙色拖动块)*100最后取整就可以了
window.onload = function () {
//1、获取
var progress=document.getElementById("progress");
var bar=progress.children[0];
var Value=progress.children[1];
var front = bar.children[0];
var mask=bar.children[1];
//2、监听鼠标按下
mask.onmousedown = function (event) {
var e = event || window.event;
//2、获取初识位置
var offsetLeft = event.clientX - mask.offsetLeft;
//2\2监听鼠标的移动
document.onmousemove = function (event) {
var e = event || window.event;
//2\获取移动的位置
var x = e.clientX - offsetLeft;
if (x < 0) x = 0;
else if (x >= bar.offsetWidth - mask.offsetWidth) x = bar.offsetWidth - mask.offsetWidth;
mask.style.left = x + "px";
front.style.width = x + "px";
Value.innerHTML = parseInt(x / (bar.offsetWidth - mask.offsetWidth) * 100) + "%";
return false;
}
//2、监听鼠标抬起
mask.onmouseup = function (event) {
document.onmousemove = null;
}
}
}
今天的文章JS进度条特效分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29003.html