拖动滚动条，显示阶段数据的值

最新推荐文章于 2021-10-12 15:25:11 发布

清酒白粥

最新推荐文章于 2021-10-12 15:25:11 发布

阅读量581

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_36030737/article/details/83348729

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

实现如下图的操作，拖动红色块改变滚动条及块上的值。该值代表 x 人团购享受 xx% 的折扣

源文件已上传

下为源代码，只是没有图片

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

        .justify_center {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .align_center {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }


        .flex_column {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        .prom_item {
            margin-bottom: 40px;
            padding-bottom: 10px;
        }

        .scrollbar {
            width: 400px;
            height: 26px;
            background: url(image/prom1.png) no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            position: relative;
            padding: 2px 0;
            box-sizing: border-box;
            margin-top: 43px;
        }

        .fix_bar {
            font-size: 0px;
        }

        .fix_bar>img {
            z-index: 3;
            position: relative;
        }

        .fix_bar>img:first-child {
            right: -2px;
        }

        .fix_bar>img:last-child {
            left: -2px;
        }

        .autoBar {
            width: 10%;
            height: 22px;
            background: url(image/prom2.png);
            background-size: auto 100%;
            z-index: 2;
        }

        .percentage {
            font-size: 12px;
            color: #2c5a90;
            margin-left: 8px;
        }

        .prom_price {
            width: 88px;
            height: 74px;
            background: url(image/prom6.png) no-repeat;
            background-size: 100% 100%;
            color: #fff;
            padding-bottom: 12px;
            box-sizing: border-box;
            position: absolute;
            top: -94px;
            left: 0;
            cursor: pointer;
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }

        .prom_price_num {
            font-size: 16px;
        }

        .prom_price_percent {
            font-size: 14px;
        }

        .prom_price_num,
        .prom_price_percent {
            width: 100%;
            display: block;
            text-align: center;
        }
        .prom_goods{
            width:500px;
            margin:100px auto;
        }
        
    </style>
</head>

<body>
    <!-- 产品列表 -->
        <div class="prom_goods">
            <div class="prom_item flex align_center">
                <!-- 滚动条 -->
                <div class="scrollbar">
                    <p class="prom_price flex flex_column align_center justify_center">
                        <span class="prom_price_num" data-num="5">5 sets </span>
                        <span class="prom_price_percent">10% OFF</span>
                    </p>
                    <div class="fix_bar flex align_center">
                        <img src="image/prom3.png" alt="">
                        <p class="autoBar">
                        </p>
                        <img src="image/prom4.png" alt="">
                        <!-- <span class="percentage">10%</span> -->
                    </div>
                </div>
            </div>
            <div class="prom_item flex align_center">
                <!-- 滚动条 -->
                <div class="scrollbar">
                    <p class="prom_price flex flex_column align_center justify_center">
                        <span class="prom_price_num" data-num="5">5 sets </span>
                        <span class="prom_price_percent">10% OFF</span>
                    </p>
                    <div class="fix_bar flex align_center">
                        <img src="image/prom3.png" alt="">
                        <p class="autoBar">
                        </p>
                        <img src="image/prom4.png" alt="">
                        <!-- <span class="percentage">10%</span> -->
                    </div>
                </div>
            </div>
            <div class="prom_item flex align_center">
                <!-- 滚动条 -->
                <div class="scrollbar">
                    <p class="prom_price flex flex_column align_center justify_center">
                        <span class="prom_price_num" data-num="5">5 sets </span>
                        <span class="prom_price_percent">10% OFF</span>
                    </p>
                    <div class="fix_bar flex align_center">
                        <img src="image/prom3.png" alt="">
                        <p class="autoBar">
                        </p>
                        <img src="image/prom4.png" alt="">
                        <!-- <span class="percentage">10%</span> -->
                    </div>
                </div>
            </div>
        </div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    /*************************团购********************************/
    
    var list = new Array();
    // list里面,第一个为'10 sets',第二个为'10 %OFF',第三个 33 为数组第一位10对应最后一位(最大值)30的百分比值.
    list.push([["10", "10", 33], ["20", "20", 66], ["30", "30", 100]]);
    list.push([["10", "10", 50], ["15", "20", 75], ["20", "25", 100]]);
    list.push([["10", "95", 28], ["15", "90", 42], ["20", "85", 57], ["25", "80", 71], ["30", "75", 85], ["35", "70", 100]]);

    var distance, left, parcent, $prom_price, curren_item, curren_arr;
    $(".prom_price").on('mousedown', function (event) {
        event = event ? event : window.event;
        if (event.button == 0) {//判断是否点击鼠标左键
            $prom_price = $(this);
            // 绑定拖动、松开事件
            $(document).bind("mousemove", move);
            $(document).bind("mouseup", stop);
        }
        curren_item = $(this).closest('.prom_item');
        curren_item = $(".prom_item").index(curren_item);
        //当前数组
        curren_arr = list[curren_item];
        return false;//阻止默认事件或冒泡
    })

    function move(event) {
        event = event ? event : window.event;
        // 计算鼠标距离$(".scrollbar")的距离
        distance = event.pageX - ($(".scrollbar").offset().left + ($(".scrollbar").width() / 2));
        // 跳固定值
        if (distance >= -200 && distance <= 200) {
            for (var i = 0; i < curren_arr.length; i++) {
                //eg:当前距离为-120时，距离左边 156-120 = 36像素。156为200 - 44(元素超出滚动条的像素距离)
                left = 156 + distance;
                $prom_price.css({ left: left });
                // 计算出当前像素对应400的百分比
                parcent = Math.floor((left + 44) / 400 * 100) < 0 ? 0 : Math.floor((left + 44) / 400 * 100);

                // 改变滚动条的长度
                $prom_price.closest('.scrollbar').find('.autoBar').css({ width: parcent + '%' });
                // 当前的百分比达到参数的百分比时，改变为参数的值
                prenum = (i == 0) ? curren_arr[0][1] : curren_arr[i - 1][2];
                if (parcent == curren_arr[i][2] || parcent > prenum) {
                    $prom_price.find(".prom_price_num").html(curren_arr[i][0] + " sets");
                    $prom_price.find(".prom_price_percent").html(curren_arr[i][1] + "% OFF");
                    // 改变滚动条右边的百分比值
                    // $prom_price.closest('.scrollbar').find('.percentage').html(parcent+'%');
                }
            }
        }

        return false;//阻止默认事件或冒泡
    }
    function stop() {
        //解绑定，这一步很必要，不然鼠标松开了还是会滑动
        $(document).unbind("mousemove", move);
        $(document).unbind("mouseup", stop);
    }
</script>

</html>

清酒白粥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
拖动滚动条，显示阶段数据的值

实现如下图的操作，拖动红色块改变滚动条及块上的值。该值代表 x 人团购享受 xx% 的折扣源文件已上传下为源代码，只是没有图片&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport
复制链接

扫一扫