jquery实现滑动标尺

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/JaRiS_jade/article/details/82149310

jquery实现滑动标尺

显示标尺，移动标尺下的三角形

html

    <div id="nearFarView">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <span class="reduce">-</span>
        <span class="add">+</span>
        <span class="near"></span>
        <span class="far"></span>
    </div>

css

#nearFarView {
    position: fixed;
    height: 10px;
    right: 20px;
    bottom: 100px;
    z-index: 10;
    margin-right: 5px;
}

#nearFarView>span {
    color: #ffffff;
    margin: 0;
    padding: 0;
    font-size: 20px;
    position: absolute;
    top: -2.5px;
}

#nearFarView>span.reduce {
    left: -15px;
}

#nearFarView>span.add {
    right: -17px;
}

#nearFarView>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: inline-block;
}

#nearFarView>ul>li {
    box-sizing: border-box;
    border-left: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    width: 10px;
    height: 100%;
    float: left;
}

#nearFarView li:last-child {
    border-right: 1px solid #ffffff;
}

#nearFarView span.near,
#nearFarView span.far {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    top: 17px;
    cursor: pointer;
}

#nearFarView span.near {
    border-bottom: 10px solid red;
    left: -6px;
}

#nearFarView span.far {
    border-bottom: 10px solid green;
    right: -8px;
}

js

window.isNearDragging = false;//是否拖动near元素
window.isFarDragging = false;//是否拖动far元素

window.nearPositionX = 0;//保存拖动near元素鼠标的上一个位置
window.farPositionX = 0;//保存拖动far元素鼠标的上一个位置

/*鼠标对着near元素按下时*/
$('#nearFarView>.near').on('mousedown', function(e) {
    isNearDragging = true;
    nearPositionX = e.clientX;
});
/*鼠标对着far元素按下时*/
$('#nearFarView>.far').on('mousedown', function(e) {
    isFarDragging = true;
    farPositionX = e.clientX;
});

/*鼠标移动时*/
$('body').on('mousemove', function(e) {

    if (isNearDragging) {//判断移动的元素是near
        let offset = e.clientX - nearPositionX;//获取移动元素的偏差值
        if (offset < 10 && offset > -10) {//如果没有一个单位的移动，则不动
            return;
        } else {
            let c = Math.floor(offset / 10);//获取移动了多少单位
            let left = $('#nearFarView>.near').position().left + c * 10;
            c
            if (left < -6) {
                $('#nearFarView>.near').css('left', '-6px');
            } else if (left > 194) {
                $('#nearFarView>.near').css('left', '194px');
            } else {
                $('#nearFarView>.near').css('left', left + 'px');
            }
            nearPositionX = e.clientX;
        }
    }
    if (isFarDragging) {//判断移动的元素是far
        let offset = e.clientX - farPositionX;//获取移动元素的偏差值
        if (offset < 10 && offset > -10) {//如果没有一个单位的移动，则不动
            return;
        } else {
            let c = Math.floor(offset / 10);//获取移动了多少单位
            let left = $('#nearFarView>.far').position().left + c * 10;
            //获取移动了多少单位
            if (left < -6) {
                $('#nearFarView>.far').css('left', '-6px');
            } else if (left > 194) {
                $('#nearFarView>.far').css('left', '194px');
            } else {
                $('#nearFarView>.far').css('left', left + 'px');
            }
            farPositionX = e.clientX;
        }
    }
});

/*鼠标按键抬起时，取消移动*/
$('body').on('mouseup', function() {
    isNearDragging = false;
    isFarDragging = false;
});

效果图