JS === 实现简易调色板

最新推荐文章于 2024-07-05 11:05:41 发布

weixin_30823001

最新推荐文章于 2024-07-05 11:05:41 发布

阅读量378

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rabbit-lin0903/p/11204371.html

本文介绍了一个基于HTML和JavaScript实现的RGB颜色选择器。通过拖动红、绿、蓝三个滑块来调整颜色值，实时更新颜色显示。文章详细解释了如何使用鼠标事件和元素样式属性完成这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .box{width: 500px;height: 400px;margin:100px auto;}
        .red,.green,.blue{width: 275px;height: 20px;float: left;position: relative;border:1px solid #eee;margin:10px;color:white;line-height: 20px;text-align: center;user-select: none}
        .mark{width:20px;height: 20px;background:#ccc;position: absolute;cursor: pointer;left:0;top:0;}
        .show{width: 100px;height: 100px;border:1px solid #000;float: left;margin-left:50px;margin-top:-50px;}
        .bag{width: 0;height: 20px;position: absolute;left:0;top:0;}  //给显示背景颜色的div 初始值 width为 0，背景色
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　这样滑动了多少，width就是多少，背景色就能够显示多少
        .red .bag{background:red;}
        .green .bag{background:green;}
        .blue .bag{background:blue;}
    </style>
</head>
<body>
    <div class="box">
        <div class="red">
            <div class="mark r">r</div>   //滑动块
            <div class="bag"></div>      // 背景颜色显示在已经滑动的距离上面
        </div>
        <div class="green">
            <div class="mark g">g</div>
            <div class="bag"></div>
        </div>
        <div class="blue"> 
            <div class="mark b">b</div>
            <div class="bag"></div>
        </div>

        <div class="show"></div>
    </div>


    <script type="text/javascript">
        var marks = document.querySelectorAll(".mark");
        var show = document.querySelector(".show");
        var r = document.querySelector(".r")
        var g = document.querySelector(".g");
        var b = document.querySelector(".b");

        var bags = document.querySelectorAll(".bag");

        for(let i = 0 ; i < marks.length;i++){

            
            marks[i].onmousedown = function(evt){
                //获取到鼠标按下时候鼠标当前的位置
            
                var x = evt.clientX;
                //获取到当前mark的坐标
                
                var left = this.offsetLeft;
                

            window.onmousemove = function(evt){
                
                //获取到鼠标移动时候的位置
                var disx = evt.clientX - x //鼠标移动的距离就是盒子移动的距离
                //此时盒子的坐标
                var ws = left + disx;     
                ws<0 ? ws=0 : ws; 　　//让滑动块始终存在于盒子的里面
                ws > 255?ws=255: ws;
                marks[i].style.left = ws + "px";
                bags[i].style.width = ws + "px";

                show.style.background= `rgb(${r.offsetLeft},${g.offsetLeft},${b.offsetLeft})`  // 模板字符串 rgb(255,0,0)

                
            }
            window.onmouseup = function(){
            
                window.onmousemove = null;
                window.onmouseup = null;
            }
        }
        }
        
    </script>
</body>
</html>