js实现进度条的拖拽

目录

代码分析

搭建一个进度条

进度条的样式

js控制拖拽

js整体代码

代码分析

搭建一个进度条

html代码实现

 <!-- 外部容器 -->
    <div class="wrappers">
        <!-- 包裹进度条 -->
        <div class="wrapper">
            <!-- 进度条 -->
            <div id="progress">
                <!-- 进度条右边圆角 -->
                <div id="progress-bar"></div>
            </div>
        </div>
        <!-- 设置进度条默认显示 0%-->
        <span id="show">0%</span>
    </div>

进度条的样式

css代码实现

/*清除浏览器默认样式*/
*{
    margin:0;
    padding:0;
}
/* 设置外部容器 */
.wrappers{
    width:900px;
    height:6px;
    margin:100px auto;
}
/* 设置进度条容器 */
.wrapper{
    width:800px;
    height:6px;
    margin-bottom:0;
    line-height:6px;
    position:relative;
    background-color:hsl(108, 100%, 83%);
}
/* 设置进度条显示颜色 */
#progress{
    width:0;
    height:100%;
    background-color:red;
}
/* 设置进度条右侧圆点 */
#progress-bar{
    width:20px;
    height:20px;
    position:absolute;
    bottom:-6px;
    border-radius: 50%;
    background-color:hsl(252, 100%, 83%);
}
/* 设置显示百分比 */
#show{
    position:relative;
    left:840px;
    top:-12px;
}

js控制拖拽

js代码实现

1.先为全局对象window添加onload事件，让js代码后加载,之后的代码全部写在这里边。

window.onload = function(){

};

2.然后分别获取进度条对象（progress）、进度条右边拖动圆角对象（progress-bar）和百分比显示对象（show）。

	// 获取progress对象
            var progress = document.getElementById("progress");
            // 获取show对象
            var show = document.getElementById("show");
            // 获取progress_bar对象
             // 为进度条右侧圆点绑定鼠标按下事件
            var progress_bar =  document.getElementById("progress-bar");

3.为progress-bar对象分别绑定鼠标按下事件，鼠标移动事件，鼠标抬起事件。这里要注意，progress-bar的鼠标移动事件和鼠标抬起事件，要写在鼠标按下事件的里边。这样才能实现拖拽的功能。

 // 为进度条右侧圆点绑定鼠标按下事件
            var progress_bar =  document.getElementById("progress-bar");
            progress_bar.onmousedown = function(event){
                event = event || window.event;
                //获取圆点偏移量
                var progressLeft = event.clientX - this.offsetLeft;

                // 为右侧圆点绑定拖动事件
                document.onmousemove = function(event){
                    event = event || window.event;
                    // 获取鼠标坐标
                    var progressX = event.clientX - progressLeft;
                     // 暂停拖动（如果拖动条超出范围，则停止拖动）
                    if(progressX<=0){
                        progressX = 0;
                    }
                    else if(progressX>=800){
                        progressX = 800;
                    }
                    console.log(progressX);
                    progress_bar.style.left = progressX+"px";
                    // 显示进度条
                    progress.style.width = progressX+"px";
                    // 显示进度条百分比
                    show.innerHTML = Math.round(progressX/8)+"%";

                };

                // 为右侧圆点绑定鼠标抬起事件
                document.onmouseup = function(event){
                    event = event || window.event;
                    // 取消鼠标移动事件
                    document.onmousemove = null;
                    // 取消鼠标抬起事件
                    document.onmouseup = null;
                };
                return false;
            };

js整体代码

<script type="text/javascript">
        window.onload = function(){
            // 获取progress对象
            var progress = document.getElementById("progress");
            // 获取show对象
            var show = document.getElementById("show");
            // 获取progress_bar对象
             // 为进度条右侧圆点绑定鼠标按下事件
            var progress_bar =  document.getElementById("progress-bar");
            progress_bar.onmousedown = function(event){
                event = event || window.event;
                //获取圆点偏移量
                var progressLeft = event.clientX - this.offsetLeft;

                // 为右侧圆点绑定拖动事件
                document.onmousemove = function(event){
                    event = event || window.event;
                    // 获取鼠标坐标
                    var progressX = event.clientX - progressLeft;
                    if(progressX<=0){
                        // 暂停拖动（如果拖动条超出范围，则停止拖动）
                        progressX = 0;
                    }
                    else if(progressX>=800){
                        progressX = 800;
                    }
                    console.log(progressX);
                    progress_bar.style.left = progressX+"px";
                    // 显示进度条
                    progress.style.width = progressX+"px";
                    // 显示进度条百分比
                    show.innerHTML = Math.round(progressX/8)+"%";

                };

                // 为右侧圆点绑定鼠标抬起事件
                document.onmouseup = function(event){
                    event = event || window.event;
                    // 取消鼠标移动事件
                    document.onmousemove = null;
                    // 取消鼠标抬起事件
                    document.onmouseup = null;
                };
                //取消浏览器对拖拽内容进行搜索的默认行为
                return false;
            };

        };
    </script>

说明：
1.我们要将鼠标移动事件和鼠标抬起事件绑定给document，因为如果只绑定给progress-bar则会出现鼠标离开进度条圆点时，进度条无法拖动和鼠标在进度条圆点上即使不点击也会进行拖动的现象。
2.当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的一个默认行为。 如果不希望发生这个行为则可以通过return false来取消这一行为。这个方法对IE8及其以下浏览器无效。
 

今天的文章js实现进度条的拖拽分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。