jq 可拖动进度条

最新推荐文章于 2021-09-01 09:46:11 发布

蒋蒋蒋ing

最新推荐文章于 2021-09-01 09:46:11 发布

阅读量467

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/jiangjiang_ing/article/details/106428898

版权

js 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
    <title>Document</title>
    <style>
        .progress {
            position: relative;
            width: 196px;
            margin: 100px auto;
            z-index: 4;

        }

        .progress_bg {
            height: 8px;
            background: rgba(242, 242, 242, 1);
            border-radius: 4px;
        }

        .progress_bar {
            background: red;
            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;
            z-index: 1;
        }

    </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 src="js/jquery.min.js"></script>
    <script>
        $(function () {
            var tag = false, ox = 0, left = 0, bgleft = 0;
            //pc端
            // $('.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 > 196) {
            //             left = 196;
            //         }
            //         $('.progress_btn').css('left', left);
            //         $('.progress_bar').width(left);
            //         $('.text').html(parseInt((left / 196) * 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 > 196) {
            //             left = 196;
            //         }
            //         $('.progress_btn').css('left', left);
            //         $('.progress_bar').animate({ width: left }, 196);
            //         $('.text').html(parseInt((left / 196) * 100) + '%');
            //     }
            // });
            //移动端
            $('.progress_btn').on('touchstart', function (e) {
                ox = e.originalEvent.targetTouches[0].pageX - left;
                tag = true;
            });
            $(document).on('touchend', function () {
                tag = false;
            });
            $('.progress').on('touchmove', function (e) {
                if (tag) {
                    left = e.originalEvent.targetTouches[0].pageX - ox;
                    if (left <= 0) {
                        left = 0;
                    } else if (left > 196) {
                        left = 196;
                    }
                    $('.progress_btn').css('left', left);
                    $('.progress_bar').width(left);
                    $('.text').html(parseInt((left / 196) * 100) + '%');
                }
            });
            $('.progress_bg').on('touchend', function (e) {
                if (!tag) {
                    bgleft = $('.progress_bg').offset().left;
                    left = e.originalEvent.changedTouches[0].pageX - bgleft;
                    if (left <= 0) {
                        left = 0;
                    } else if (left > 196) {
                        left = 196;
                    }
                    $('.progress_btn').css('left', left);
                    $('.progress_bar').animate({ width: left }, 196);
                    $('.text').html(parseInt((left / 196) * 100) + '%');
                }
            });
        });
    </script>
</body>

</html>

蒋蒋蒋ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jq 可拖动进度条

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> <title>.
复制链接

扫一扫

专栏目录