js实现滑块拖动更改div颜色

思路:

首先既然是滑块拖动,那就必须要先把小滑块做出来。接着我们可以通过设置三条滑块,对应颜色中的rgb,然后通过js设置div的background-color就可以了。

而滑块拖动本质上来说就是div的拖动,话不多说直接上代码:

let line = 0; //确定鼠标按下,防止滑块在鼠标未按下时移走
let oldB = 0;   //滑块的原位置
let oldM = 0;    //鼠标的原位置
let oObj ;        //获取滑块对象(原谅我起变量名字随意了一点)

//鼠标按下事件
function start(obj) {

    oldB = parseInt(obj.style.marginLeft) //获取滑块的原位置

    let e = event || window.event;
    oldM = e.clientX    //获取鼠标原位置

    if(oldB >=0 && oldB <= 255) { //设定范围,超出这个范围是异常情况,不允许滑块移动

       line = 1;    //允许滑块移动
       oObj = obj;    //获取按下时滑块对象

    }

 }

//鼠标移动事件
function blockMove(){
    if(line == 1)    //当鼠标按下时允许滑动
    {
        let e = event || window.event;
        let PX = oldB - (oldM - e.clientX) //获取鼠标偏移量

        /*设定范围*/
        if(PX > 255) PX = 255
        if(PX < 0) PX = 0    


        oObj.style.marginLeft = PX +"px"    //更改滑块位置,使其跟随鼠标移动
       
    }
}

//鼠标松开事件
function blockEnd(){
/*不允许滑块移动,清除滑块对象*/
     line = 0; 
     oObj = null;
}

加上div:

<div  style="width:255px;height:5px;background-color: #bbbbbb;margin-top: 30px;margin-left: 20px" > <!--这是线,滑块在线上滑-->
                <div  style="width: 15px;height:20px;background-color: #f87272;margin-left: 0px" onmousedown="start(this)" onmousemove="blockMove()" onmouseup="blockEnd()"></div><!--这是滑块-->
</div>

这样,我们就做好了一个小滑块,然后直接Ctrl+c/v ,就做好了三个滑块。

但是我们发现滑块滑动的并不是很顺畅,一旦鼠标移动速度块一点,滑块就不跟随鼠标移动了,所以为了解决这个问题,我在body标签上直接加入了鼠标移动事件

<body onmousemove="blockMove()" onmouseup="blockEnd()">

实时监听鼠标移动(可能有更好的办法)。

不管怎么说,现在的滑块滑动的就十分顺畅了。

不过,滑块在滑动我们根本不知道具体数值,所以我们还要加上提示文本:

div部分:

        <div  style="width:255px;height:5px;background-color: #bbbbbb;margin-top: 30px;margin-left: 20px" ><!--这是线-->
                <div id="r" style="width: 15px;height:20px;background-color: #f87272;margin-left: 0px" onmousedown="start(this)" onmousemove="blockMove()" onmouseup="blockEnd()"><!--这是滑块-->
                    <div style="float:left;margin-left: 15px" id="rT" >0</div><!--这是提示-->
                </div>
            </div>
            <div  style="width:255px;height:5px;background-color: #bbbbbb;margin-top: 30px;margin-left: 20px" >
                <div id="g" style="width: 15px;height:20px;background-color: #72a877;margin-left: 0px" onmousedown="start(this)" onmousemove="blockMove()" onmouseup="blockEnd()">
                    <div style="float:left;margin-left: 15px" id="gT" >0</div>
                </div>
            </div>
            <div  style="width:255px;height:5px;background-color: #bbbbbb;margin-top: 30px;margin-left: 20px" >
                <div id="b" style="width: 15px;height:20px;background-color: #60719f;margin-left: 0px" onmousedown="start(this)" onmousemove="blockMove()" onmouseup="blockEnd()">
                    <div style="float:left;margin-left: 15px" id="bT">0</div>
                </div>
            </div>

js:

//还是之前的鼠标移动事件
function blockMove(){
    if(line == 1)
    {

        let e = event || window.event;
        et PX = oldB - (oldM - e.clientX)
        if(PX > 255) PX = 255
        if(PX < 0) PX = 0
        oObj.style.marginLeft = PX +"px"

        //在这里加了一行更改提示div里面的文本,让文本内容是滑块的marginLeft的数值
        oObj.children[0].innerText = parseInt(oObj.style.marginLeft)
                       
     }
}

现在滑块已经全部做好了,接下来就是和div图层的关联了

div图层:

<div id="main" style="position:absolute;left:100px;top:200px;width: 600px;height:400px;float:left;background-color: rgb(174,236,149) ;z-Index: 120; "></div>

js:

//还是那个鼠标移动事件(我不是为了水文章)
function blockMove(){
    if(line == 1)
    {
         let e = event || window.event;
         let PX = oldB - (oldM - e.clientX)
         if(PX > 255) PX = 255
         if(PX < 0) PX = 0
         oObj.style.marginLeft = PX +"px"
         oObj.children[0].innerText = parseInt(oObj.style.marginLeft)

            //获取提示文本,三个提示文本分别代表r,g,b
         let r = document.getElementById("rT").innerText
         let g = document.getElementById("gT").innerText
         let b = document.getElementById("bT").innerText
            
        //设定背景颜色
         document.getElementById("main").style.backgroundColor = "rgb("+r+","+g+","+b+")"
        }
}

现在我们已经能通过滑动滑块改变div的背景颜色了,但是还有一点点瑕疵是我一开始已经设置了div的rgb,但是滑块仍然从最左边开始,所以我又加了初始化。

//获取div背景颜色
    let opennessFirst = document.getElementById("main").style.backgroundColor.split(',')
    let Or = parseInt(opennessFirst[0].substring(4))
    let Og = parseInt(opennessFirst[1])
    let Ob = parseInt(opennessFirst[2])


    document.getElementById("r").style.marginLeft = Or + 'px'; document.getElementById("rT").innerText = Or;
    document.getElementById("g").style.marginLeft = Og + 'px'; document.getElementById("gT").innerText = Og;
    document.getElementById("b").style.marginLeft = Ob + 'px'; document.getElementById("bT").innerText = Ob;

下面是完整代码:

<body onmousemove="blockMove()" onmouseup="blockEnd()">

<div id="main" style="width: 600px;height:400px;float:left;background-color: rgb(174,236,149) ;z-Index: 120; "></div>

<div id="Color" style="position: absolute;top:600px;z-index:901;height: 140px;width: 300px;"><!--给三个滑块套了一个盒子-->
    <div  style="width:255px;height:5px;background-color: #bbbbbb;margin-top: 30px;margin-left: 20px" >
        <div id="r" style="width: 15px;height:20px;background-color: #f87272;margin-left: 0px" onmousedown="start(this)" onmousemove="blockMove()" onmouseup="blockEnd()">
            <div style="float:left;margin-left: 15px" id="rT" >0</div>
        </div>
    </div>
    <div  style="width:255px;height:5px;background-color: #bbbbbb;margin-top: 30px;margin-left: 20px" >
        <div id="g" style="width: 15px;height:20px;background-color: #72a877;margin-left: 0px" onmousedown="start(this)" onmousemove="blockMove()" onmouseup="blockEnd()">
            <div style="float:left;margin-left: 15px" id="gT" >0</div>
        </div>
    </div>
    <div  style="width:255px;height:5px;background-color: #bbbbbb;margin-top: 30px;margin-left: 20px" >
        <div id="b" style="width: 15px;height:20px;background-color: #60719f;margin-left: 0px" onmousedown="start(this)" onmousemove="blockMove()" onmouseup="blockEnd()">
            <div style="float:left;margin-left: 15px" id="bT">0</div>
        </div>
    </div>
<script>
    let line = 0; //确定鼠标按下,防止滑块在鼠标未按下时移走
    let oldB = 0;   //滑块的原位置
    let oldM = 0;    //鼠标的原位置
    let oObj ;        //获取滑块对象(原谅我起变量名字随意了一点)

    //获取div背景颜色
    let opennessFirst = document.getElementById("main").style.backgroundColor.split(',')
    let Or = parseInt(opennessFirst[0].substring(4))
    let Og = parseInt(opennessFirst[1])
    let Ob = parseInt(opennessFirst[2])


    document.getElementById("r").style.marginLeft = Or + 'px'; document.getElementById("rT").innerText = Or;
    document.getElementById("g").style.marginLeft = Og + 'px'; document.getElementById("gT").innerText = Og;
    document.getElementById("b").style.marginLeft = Ob + 'px'; document.getElementById("bT").innerText = Ob;
    //鼠标按下事件
    function start(obj) {

        oldB = parseInt(obj.style.marginLeft) //获取滑块的原位置

        let e = event || window.event;
        oldM = e.clientX    //获取鼠标原位置

        if(oldB >=0 && oldB <= 255) { //设定范围,超出这个范围是异常情况,不允许滑块移动

            line = 1;    //允许滑块移动
            oObj = obj;    //获取按下时滑块对象

        }

    }

    //鼠标移动事件
    function blockMove(){
        if(line == 1)    //当鼠标按下时允许滑动
        {
            let e = event || window.event;
            let PX = oldB - (oldM - e.clientX) //获取鼠标偏移量

            /*设定范围*/
            if(PX > 255) PX = 255
            if(PX < 0) PX = 0

            oObj.style.marginLeft = PX +"px"    //更改滑块位置,使其跟随鼠标移动

            //在这里加了一行更改提示div里面的文本,让文本内容是滑块的marginLeft的数值
            oObj.children[0].innerText = parseInt(oObj.style.marginLeft)
            //获取提示文本,三个提示文本分别代表r,g,b
            let r = document.getElementById("rT").innerText
            let g = document.getElementById("gT").innerText
            let b = document.getElementById("bT").innerText

            //设定背景颜色
            document.getElementById("main").style.backgroundColor = "rgb("+r+","+g+","+b+")"
        }
    }

    //鼠标松开事件
    function blockEnd(){
        /*不允许滑块移动,清除滑块对象*/
        line = 0;
        oObj = null;
    }
</script>
</body>

下面附上效果图

这是刚加载网页

 随便滑动了几下

 

 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用原生JavaScript以面向对象方式实现Slider滑块的开启范围选择用法的示例代码: ```javascript class Slider { constructor(options) { this.ele = document.querySelector(options.ele); this.min = options.min; this.max = options.max; this.value = options.value || [this.min, this.max]; this.setTips = options.setTips || null; this.done = options.done || null; this.sliderRange = null; this.sliderThumbStart = null; this.sliderThumbEnd = null; this.draggingStart = false; this.draggingEnd = false; this.init(); } init() { this.createSlider(); this.updateSlider(); this.sliderThumbStart.addEventListener('mousedown', this.startDraggingStart.bind(this)); this.sliderThumbEnd.addEventListener('mousedown', this.startDraggingEnd.bind(this)); document.addEventListener('mousemove', this.handleDragging.bind(this)); document.addEventListener('mouseup', this.stopDragging.bind(this)); } createSlider() { this.sliderRange = document.createElement('div'); this.sliderRange.classList.add('slider-range'); this.sliderThumbStart = document.createElement('div'); this.sliderThumbStart.classList.add('slider-thumb'); this.sliderThumbStart.classList.add('slider-thumb-start'); this.sliderThumbEnd = document.createElement('div'); this.sliderThumbEnd.classList.add('slider-thumb'); this.sliderThumbEnd.classList.add('slider-thumb-end'); this.ele.appendChild(this.sliderRange); this.ele.appendChild(this.sliderThumbStart); this.ele.appendChild(this.sliderThumbEnd); } updateSlider() { const rangeWidth = this.ele.clientWidth; const startPercentage = ((this.value[0] - this.min) / (this.max - this.min)) * 100; const endPercentage = ((this.value[1] - this.min) / (this.max - this.min)) * 100; this.sliderRange.style.left = `${startPercentage}%`; this.sliderRange.style.width = `${endPercentage - startPercentage}%`; } startDraggingStart() { this.draggingStart = true; } startDraggingEnd() { this.draggingEnd = true; } handleDragging(event) { if (this.draggingStart || this.draggingEnd) { const rangeWidth = this.ele.clientWidth; const startX = this.ele.getBoundingClientRect().left; const endX = startX + rangeWidth; let newValue; if (this.draggingStart) { newValue = ((event.clientX - startX) / rangeWidth) * (this.max - this.min) + this.min; if (newValue < this.min) { newValue = this.min; } else if (newValue > this.value[1]) { newValue = this.value[1]; } this.value[0] = newValue; this.updateSlider(); } if (this.draggingEnd) { newValue = ((event.clientX - startX) / rangeWidth) * (this.max - this.min) + this.min; if (newValue > this.max) { newValue = this.max; } else if (newValue < this.value[0]) { newValue = this.value[0]; } this.value[1] = newValue; this.updateSlider(); } if (typeof this.setTips === 'function') { this.setTips(this.value); } } } stopDragging() { if (this.draggingStart || this.draggingEnd) { this.draggingStart = false; this.draggingEnd = false; if (typeof this.done === 'function') { this.done(this.value); } alert(`当前的value参数为:${this.value}`); } } } // 使用示例 const slider = new Slider({ ele: '.slider-container', min: 0, max: 100, value: [30, 60], setTips: (value) => { console.log(`当前的value参数为:${value}`); }, done: (value) => { console.log(`滑块拖拽完毕,当前的value参数为:${value}`); } }); ``` 在上述示例中,我们通过`class Slider`定义了一个Slider类,构造函数中接收了`options`对象作为参数,包含了初始化Slider时的各种配置信息。在`init`方法中,我们创建了滑块的DOM元素,并添加了相应的事件监听器。通过`updateSlider`方法更新滑块的位置和宽度。 在拖动滑块过程中,会触发`handleDragging`方法来更新滑块的值和位置,并通过`setTips`方法设置提示文本。当拖动结束时,会触发`stopDragging`方法,其中会调用`done`方法进行回调,并使用`alert`模拟提示弹窗。 你可以根据需要修改样式和事件处理逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值