阅读 362
创建一个简单的色轮

创建一个简单的色轮

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。


简单,其实就是调库!

文档在这里 Get Started | iro.js

我也写了一个简单的样例在下面可以参考一下😉

使用

  1. 通过CDN导入:

    <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
    复制代码
  2. 在HTML中添加一个div:

    <div id="picker"></div>
    复制代码
  3. 最后在JS中创建:

    var colorPicker = new iro.ColorPicker("#picker", {
      // 初始宽度
      width: 320,
      // 初始颜色
      color: "#f00"
    });
    复制代码

一个样例

GIF.gif

一个非常简单的样例,也就是GIF上显示的样子,可以参考一下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Mancuoj</title>
        <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
        <style>
            body {
                background-color: #fff;
                min-height: 90vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            #indicator {
                width: 200px;
                height: 200px;
                background-color: #f00;
                border-radius: 25px;
            }

            #picker {
                margin-left: 40px;
            }
        </style>
    </head>
    <body>
        <div id="indicator"></div>
        <div id="picker"></div>
        <script>
            let colorIndicator = document.getElementById('indicator');
            let colorPicker = new iro.ColorPicker("#picker", {
                width: 320,
                color: "#f00"
            });
            colorPicker.on('color:change', function(color) {
                colorIndicator.style.backgroundColor = color.hexString;
            });
        </script>
    </body>
</html>
复制代码

我是Mancuoj,欢迎关注交流一起学习!

文章分类
前端
文章标签