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

最新推荐文章于 2023-02-08 16:34:12 发布
最新推荐文章于 2023-02-08 16:34:12 发布
阅读量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
    评论
script js滑动改变颜色
Ason_haiyu的博客
01-05 1077
js滑动改变颜色 $(function(){ $("p").click(function(){ $(this).css("color","red"); }); $("p").hover( function(){ $(this).css("color","red"); }, function(){
鼠标进入色块，页面背景改变颜色
Mr_115的博客
11-02 486
页面显示4个颜色块儿，当鼠标进入某个颜色块儿时，页面背景色变成该颜色
JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色。
Lou__Lan的博客
11-12 608
JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色。
操作元素之修改样式属性
leechoy
06-12 629
<!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>..
日历插件 可多选以及颜色区分
kangmingyaner的博客
05-29 1085
本文章是记录自己整理的日历插件，根据jquery插件库 下载下来后，去除繁琐的功能，整理为自己需要的日历样式。(根据自己项目，需要的是其中的日历可多选天数且颜色变化功能) 原日历插件链接：http://www.jq22.com/yanshi6487 整理的其中还有没有用到的东西，没整理干净，如有需要自己查看。 代码html： <div class="col-md-12" style="background-color: #FFF;border-radius:4px"> <div
JS刻度标尺滑块拖动代码
07-24
在JavaScript（JS）编程中，实现一个刻度标尺滑块拖动功能是常见的交互设计需求，常用于创建用户友好的界面，如音量调节、进度条控制等。本项目提供的"JS刻度标尺滑块拖动代码"旨在帮助开发者轻松实现这种效果。以下...
基于JS组件实现拖动滑块验证功能(代码分享)
10-21
这种验证方式要求用户手动将滑块拖动到正确的位置，以证明他们是真实的人。在JavaScript中实现拖动滑块验证涉及多个关键步骤，包括HTML结构设置、CSS样式定义、JavaScript事件监听和处理。 首先，HTML部分构建了...
滑块拖拽效果的实现(定位版)
08-04
为了实现拖拽功能，我们需要通过JavaScript或jQuery监听滑块容器的`mousedown`、`mousemove`和`mouseup`事件。在`mousedown`事件中，我们需要记录鼠标按下时的坐标和滑块的初始位置。`mousemove`事件用于实时更新...
jQuery实现移动端滑块拖动验证跳转特效源码.zip
11-19
这个名为"jQuery实现移动端滑块拖动验证跳转特效源码.zip"的压缩包包含了一个使用jQuery库来实现这一功能的源码示例。在本文中，我们将深入探讨jQuery在移动端滑块验证中的应用，以及如何实现跳转特效。 首先，...
鼠标拖动滑块图片修改前后对比js特效.zip
最新发布
09-25
在这个名为“鼠标拖动滑块图片修改前后对比js特效”的项目中，我们主要探讨的是如何使用jQuery库来实现这一功能。 jQuery是一个轻量级、功能强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax...
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
当div中的组件超过高度时，显示滑块（el-tree超出高度时，显示滑块）
weixin_38345306的博客
05-04 740
当div中的组件超过高度时，显示滑块（el-tree超出高度时，显示滑块）
JS实现文字从左到右滚动变色
qq_37860994的博客
05-14 2460
文字从左到右滚动变色 &lt;script language="javascript"&gt; var message="welcome to friends word!!!";//文字内容设置 var n=0; if(document.all){ //设置文本属性 document.write('&lt;font size="12px" color="#ff6600"&gt;'
javascript设置颜色值的几种方法
weixin_45634433的博客
02-08 2404
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360。本文链接:https://www.ngui.cc/51cto/show-560265.html。S：Saturation(饱和度)。取值为：0.0% - 100.0%L：Lightness(亮度)。取值为：0.0% - 100.0%A：Alpha透明度。
值得练手的JavaGUI项目——色彩调节器的实现【附完整源码】
累计发表博客60余万字，CSDN 博客专家、Java 领域优质创作者、华为云享专家、阿里云专家博主。专注分享 Java 优质文章，毕设实战项目开发，全网粉丝10W+
06-25 5065
目录 像素RGB值 窗体模块设计 完整源码 Hello！大家好！我是努力赚钱买生发水的灰小猿！ 最近在做开发的时候有用到红、绿、蓝三色号的色彩调节，然后想使用某种色彩还需要去相关的网站上进行查询很是麻烦，于是就想着利用Java的GUI开发一个简单的调色器。可以自行调节色彩并且获取到对应的红绿蓝三种色号。 先来看一波效果图： 其实调色器的基本设计思路非常简单： 利用Java窗体，设置红。绿。蓝三种滑块、然后当我们拖动滑块使三种颜色的RGB值发生改变时，利用ChangeListener.
js初级学习之拖拽功能 复数个且变色
MENGCHIXIANZI的专栏
01-03 131
<body> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div...
js拖拽之三：碰撞切换颜色
sh435367384的博客
03-31 665
原理图：代码实现：&lt;style&gt; #div1{ width:50px; height:50px; background-color: black; position:absolute; top:0; left:0; } #div2{ width:200px; height:200px; background-color:...
实现页面指定div中滑块滑动距离
chenyidong521的博客
01-17 2963
var btn=sessionStorage.getItem("btn"); if(btn!=null || btn!=undefined){ $('.btn-icon').scrollLeft(btn); } function showPurInfo(id){ sessionStorage.setItem("btn",0); window.location.href
CSS实现内容滑块
Mr.Nice
03-14 5735
效果链接 一、Html结构 首先构造如下html，很简单的由div和一个列表组成，至于列表里的内容，根据个人需要自己填充。 div id="slider">     ul>         li>            p>www.ria.com--ria之家，专注于ria技术的blog，欢迎您的加入。博客不断完善中，感谢您的支持！br/> 博客不
- 利用**原生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 = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值