介绍 & lt; html>
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> Document</title>
& lt;才能style>
,,,* {
,,,,,保证金:,0;
,,,,,填充:,0;
,,,}
,,,.scroll {
,,,,,保证金:100 px;
,,,,,宽度:,500 px;
,,,,,,身高:5 px;
,,,,,背景:,# ccc;
,,,,,位置:,相对;
,,,}
,,,. bar {
,,,,,宽度:,10 px;
,,,,,身高:,20 px;
,,,,,背景:,# 369;
,,,,,位置:,绝对;
,,,,,:,7 px;
,,,,,左:,0;
,,,,,光标:,指针;
,,,}
,,,.mask {
,,,,,位置:,绝对;
,,,,,左:,0;
,,,,,:,0;
,,,,,背景:,# 369;
,,,,,宽度:,0;
,,,,,,身高:5 px;
,,,}
& lt;才能/style>,,
& lt;/head>
& lt; body>
& lt;才能div 类=皊croll", id=皊croll"比;
,,,& lt; div 类=癰ar", id=癰ar"比;
,,,& lt;/div>
,,,& lt; div 类=癿ask", id=癿ask"祝辞& lt;/div>
& lt;才能/div>
& lt;才能p> & lt;/p>
& lt;才能script>,,
,,,var scroll =, . getelementbyid(& # 39;滚动# 39;);
,,,var bar =, . getelementbyid(& # 39;酒吧# 39;);
,,,var mask =, . getelementbyid(& # 39;面具# 39;);
,,,var ptxt =, document.getElementsByTagName (& # 39; p # 39;) [0];
,,,var barleft =, 0;
,,,bar.onmousedown =,函数(事件){
,,,,,var event =, event | |, window.event;
,,,,,var leftVal =, event.clientX 作用;this.offsetLeft;
,,,,,var that =,;
,,,,,,//,拖动一定写到,down 里面才可以
,,,,,document.onmousemove =,函数(事件){
,,,,,,,var event =, event | |, window.event;
,,,,,,,barleft =, event.clientX 作用;leftVal;,,,,,
,,,,,,,如果(barleft & lt;, 0)
,,,,,,,,,barleft =, 0;
,,,,,,,else 如果(barleft 祝辞,scroll.offsetWidth 作用;bar.offsetWidth)
,,,,,,,,,barleft =, scroll.offsetWidth 作用;bar.offsetWidth;
,,,,,,,mask.style.width =, barleft + & # 39; px # 39;,;
,,,,,,,that.style.left =, barleft +,“px";
,,,,,,,ptxt.innerHTML =,“已经走了“,+,方法(barleft/(scroll.offsetWidth-bar.offsetWidth), *, 100), +,“%”;
,,,,,,,//防止选择内容,当拖动鼠标过快时候,弹起鼠标,酒吧也会移动,修复bug
,,,,,,,window.getSelection ?, window.getSelection () .removeAllRanges (),:, document.selection.empty ();
,,,,,}
,,,}
,,,document.onmouseup =,函数(){
,,,,,document.onmousemove =,零,,//弹起鼠标不做任何操作
,,,}
& lt;才能/script>
& lt;/body>
& lt;/html>
小编给大家分享一下JavaScript实现水平进度条拖拽效果的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
具体内容如下
效果图:
以上是“JavaScript实现水平进度条拖拽效果的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
