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

最新推荐文章于 2024-05-13 06:59:53 发布
最新推荐文章于 2024-05-13 06:59:53 发布
阅读量1.7k 收藏 7
点赞数 2
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/src_chao1/article/details/122935042
版权

思路：

首先既然是滑块拖动，那就必须要先把小滑块做出来。接着我们可以通过设置三条滑块，对应颜色中的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
    评论
一个简单的滑动变色滑动条
weixin_44689966的博客
03-09 399
【代码】一个简单的滑动变色滑动条。
script js滑动改变颜色
Ason_haiyu的博客
01-05 1082
js滑动改变颜色 $(function(){ $("p").click(function(){ $(this).css("color","red"); }); $("p").hover( function(){ $(this).css("color","red"); }, function(){
JavaScript 动态网页实例 —— 文字色彩与形状
最新发布
cccloveforever的博客
05-13 1207
首先介绍霓虹灯文字效果的设计，介绍文字色彩的静态渐变，然后介绍两个文字大小不断变化的示例，最后，则是两段文字色彩动态变化的代码。本章实例针对性较强,稍加修改就可以应用在网页中。读者不必拘泥于实例的效果，而应更重视实现这些效果的方法，相信这些实例能对开阔思路有一定的帮助。
鼠标进入色块，页面背景改变颜色
Mr_115的博客
11-02 490
页面显示4个颜色块儿，当鼠标进入某个颜色块儿时，页面背景色变成该颜色
JS:鼠标事件：实现鼠标移动到div背景颜色变换，移开还原
热门推荐
qq_41508763的博客
10-22 1万+
js学习中的误区和错误 js实现鼠标移动到div背景颜色变换，移开还原 onmouseover:鼠标移到某元素之上 onmouseout:鼠标从某元素移开 思考：为什么不能用id选择器使用第一种方法，问题出在哪里？ 第一种方法：class类选择器 只能用类选择器，为什么不能用id选择器，为什么会报错onmouseover=function()未定义？ <script type="text/javascript"> window.onload=functio...
操作元素之修改样式属性
leechoy
06-12 639
<!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>..
JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色。
Lou__Lan的博客
11-12 610
JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色。
JS刻度标尺滑块拖动代码
07-24
在JavaScript（JS）编程中，实现一个刻度标尺滑块拖动功能是常见的交互设计需求，常用于创建用户友好的界面，如音量调节、进度条控制等。本项目提供的"JS刻度标尺滑块拖动代码"旨在帮助开发者轻松实现这种效果。以下...
基于JS组件实现拖动滑块验证功能(代码分享)
10-21
这种验证方式要求用户手动将滑块拖动到正确的位置，以证明他们是真实的人。在JavaScript中实现拖动滑块验证涉及多个关键步骤，包括HTML结构设置、CSS样式定义、JavaScript事件监听和处理。 首先，HTML部分构建了...
滑块拖拽效果的实现(定位版)
08-04
为了实现拖拽功能，我们需要通过JavaScript或jQuery监听滑块容器的`mousedown`、`mousemove`和`mouseup`事件。在`mousedown`事件中，我们需要记录鼠标按下时的坐标和滑块的初始位置。`mousemove`事件用于实时更新...
js实现的拖动后记录轨迹并运行
10-29
### JavaScript 实现拖动后记录轨迹并运行 在前端开发中，实现拖拽效果是非常常见的需求之一，尤其是在交互式应用中。本文将详细介绍如何利用JavaScript来实现一个具有拖影效果的拖动轨迹功能。 #### 一、理解需求...
让页面上两个div中的滚动条(滑块)同步运动示例
12-04
使用JQuery添加如下代码 代码如下: $(‘#sourceDiv’).scroll( function() { $(‘#targetDiv’).scrollTop($(this).scrollTop()); $(‘#targetDiv’).scrollLeft($(this).scrollLeft()); }); $(‘#targetDiv’).scroll( function() { $(‘#sourceDiv’).scrollTop($(this).scrollTop()); $(‘#sourceDiv’).scrollLeft($(this).scrollLeft()); });
jQuery实现移动端滑块拖动验证跳转特效源码.zip
11-19
这个名为"jQuery实现移动端滑块拖动验证跳转特效源码.zip"的压缩包包含了一个使用jQuery库来实现这一功能的源码示例。在本文中，我们将深入探讨jQuery在移动端滑块验证中的应用，以及如何实现跳转特效。 首先，...
日历插件 可多选以及颜色区分
kangmingyaner的博客
05-29 1087
本文章是记录自己整理的日历插件，根据jquery插件库 下载下来后，去除繁琐的功能，整理为自己需要的日历样式。(根据自己项目，需要的是其中的日历可多选天数且颜色变化功能) 原日历插件链接：http://www.jq22.com/yanshi6487 整理的其中还有没有用到的东西，没整理干净，如有需要自己查看。 代码html： <div class="col-md-12" style="background-color: #FFF;border-radius:4px"> <div
CSS3颜色渐变选择-可以自由拖动DIV的渐变颜色，并直接复制代码即可，方便快捷，供大家学习研究参考
惠惠软件
12-12 401
可以自由拖动DIV的渐变颜色，并直接复制代码的一款插件。
点击div使div的颜色在红禄蓝三种颜色之间顺序切换
weixin_45719052的博客
06-23 525
点击div使div的颜色在红禄蓝三种颜色之间顺序切换
js自定义滑块
夜空孤狼啸的博客
12-18 413
【代码】js自定义滑块。
div滑块的缓冲运动
OrdnAry的博客
08-27 236
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1{width: 100px
- 利用**原生js**并且 以**面向对象**方式实现 Slider滑块的 **开启范围选择用法** - 模拟组件封装要求: 初始化的时候考虑以下参数 + ele: 绑定元素选择器(就是滑块的容器) + min: 滑块的最小值 + max: 滑块的最大值 + value: 滑块初始值。值为数组，表示开始和结尾的区间,如： value: [30, 60] + setTips: 滑块拖拽时设置提示文本的回调函数。并返回当前的 value 参数 + done : 滑块拖拽完毕的回调函数。并返回当前的 value 参数。滑块拖动过程中不会触发。 - 注意: 滑块拖拽完毕后的提示弹窗使用 alert 模拟
07-23
以下是使用原生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、付费专栏及课程。

余额充值