一个简单的原生js取色效果

 

效果图如上:

HTML和js代码如下:

<style>
        *{
            padding: 0;
            margin:0;
            list-style: none;
        }
        .colorPicker{
            width: 255px;
            width: 765px;
            margin:50px auto;
        }
        .colorBar{
            height: 30px;
            width: 255px;
            width: 765px;
            position: relative;
        }
        .red{
            width: 255px;
            height: 30px;
            position: absolute;
            top: 0;
            left: 0;
            background:linear-gradient(to right,rgb(255,0,0),rgb(196,129,129));
        }
        .black{
            width: 255px;
            height: 30px;
            position: absolute;
            top: 0;
            left: 255px;
            background:linear-gradient(to right,rgb(0,0,0),rgb(204,204,204));
        }
        .green{
            width: 255px;
            height: 30px;
            position: absolute;
            top: 0;
            left: 510px;
            background:linear-gradient(to right,rgb(0,255,0),rgb(181,243,181));
        }
        .colorSlider{
            /* width: 12px; */
            height: 54px;
            position: absolute;
            left: 50%;
             margin-left: -6px;  
            top: -12px;
            z-index: 20;
            /*background-color: green;*/
        }
        .sliderTop{
            width: 0;
            height: 0;
            position: absolute;
            left: 0;
            top: 0;
            border-left:6px solid transparent;
            border-top:12px solid red;
            border-bottom:6px solid transparent;
            border-right:6px solid transparent;
        }
        .sliderBottom{
            width: 0;
            height: 0;
            position: absolute;
            left: 0;
            bottom: 0;
            border-left:6px solid transparent;
            border-top:6px solid transparent;
            border-bottom:12px solid red;
            border-right:6px solid transparent;
        }
        .colorShow{
            width: 253px;
            height: 100px;
            margin:20px auto 0 auto;
            border: 1px solid #000;
        }
        .showRGB{ text-align: center; display: block; }
        .flag{
            width: 1px;
            height: 80px;
            position: absolute;
            left: 50%;
            top: -22px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="colorPicker">
        <div class="colorBar">
            <div class="red"></div>
            <div class="black"></div>
            <div class="green"></div>
            <div class="colorSlider">                
                <div class="sliderTop"></div>
                <div class="sliderBottom"></div>
            </div>
           
        </div>
        <div class="colorShow"></div>
        <div class="showRGB"></div>
    </div>
    <script>
        function ColorPicker(parameter){
            this.colorPicker = parameter.colorPicker;
            this.colorShow = parameter.colorShow;
            this.showRGB = parameter.showRGB;
            this.colorSlider = parameter.colorSlider;
            this.colorArr = parameter.colorArr;
            this.cell = this.colorPicker.offsetWidth / this.colorArr.length;
        }
        ColorPicker.prototype = {
            init:function(){
                this.getRGB();
                return this;
            },
            move:function(){
                var that = this;
                this.colorSlider.onmousedown = function(e){
                    var startX = e.pageX - this.offsetLeft;
                    var startY = e.pageY - this.offsetTop;
                    document.onmousemove = function(e){
                        var endX = e.pageX - startX;
                        var endY = e.pageY -startY;
                        if(endX<=0){
                            endX = 0
                        }else if(endX>=this.colorPicker.offsetWidth){
                            endX = this.colorPicker.offsetWidth;
                        }
                        
                        this.colorSlider.style.left = endX +"px";
                        let xx = this.colorSlider.offsetLeft + 6;
                        this.getRGB(xx);
                    }.bind(that)
                };
                this.colorSlider.onmouseup = document.onmouseup = function(){
                    document.onmousemove =null;
                };
            },
            getRGB:function(x){
                var X = x||this.colorSlider.offsetLeft,
                    index = (X/this.cell|0)>=this.colorArr.length ? this.colorArr.length -1 : (X/this.cell|0),
                    s = this.colorArr[index];
                var rc = s[0]-s[3],
                    gc = s[1]-s[4],
                    bc = s[2]-s[5];
                var r=s[0],g=s[1],b=s[2];
                rc>0 ? r-=parseInt((Math.abs(rc)/this.cell)*(X%this.cell)) : r+=parseInt((Math.abs(rc)/this.cell)*(X%this.cell));
                gc>0 ? g-=parseInt((Math.abs(gc)/this.cell)*(X%this.cell)) : g+=parseInt((Math.abs(gc)/this.cell)*(X%this.cell));
                bc>0 ? b-=parseInt((Math.abs(bc)/this.cell)*(X%this.cell)) : b+=parseInt((Math.abs(bc)/this.cell)*(X%this.cell));
                x?this.colorShow.style.backgroundColor = `rgb(${r},${g},${b})`:this.colorShow.style.backgroundColor = `rgb(${r+6},${g+6},${b+6})`;
                //this.showRGB.innerHTML=`${r}|${g}|${b}|${x%this.cell}`;
            }
        }
        new ColorPicker({
            colorPicker:document.querySelector('.colorBar'),
            colorShow:document.querySelector('.colorShow'),
            showRGB:document.querySelector('.showRGB'),
            colorSlider:document.querySelector(".colorSlider"),
            colorArr:[
                [255,0,0,196,129,129],
                [0,0,0,204,204,204],
                [0,255,0,181,243,181]
            ]
        }).init().move();
        
    </script>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单原生JS实现滑动效果的代码: HTML部分: ```html <div class="slider-wrap"> <ul class="slider-list"> <li><img src="img1.jpg"></li> <li><img src="img2.jpg"></li> <li><img src="img3.jpg"></li> <li><img src="img4.jpg"></li> </ul> </div> ``` CSS部分: ```css .slider-wrap { width: 500px; height: 300px; overflow: hidden; position: relative; } .slider-list { width: 2000px; /* 每个图片的宽度为500px,一共有4张图片,因此总宽度为2000px */ position: absolute; left: 0; top: 0; } .slider-list li { float: left; width: 500px; height: 300px; } ``` JS部分: ```javascript var sliderList = document.querySelector('.slider-list'); var sliderItemWidth = sliderList.querySelector('li').offsetWidth; // 获取每个图片的宽度 var sliderIndex = 0; // 当前显示的图片索引 var sliderInterval; // 自动播放的定时器 // 自动播放 function autoPlay() { sliderInterval = setInterval(function() { sliderIndex++; if (sliderIndex >= 4) { sliderIndex = 0; // 如果已经到最后一张图片,将索引重置为0 } sliderList.style.left = -sliderIndex * sliderItemWidth + 'px'; // 移动图片列表 }, 2000); } autoPlay(); // 页面加载完成后自动播放 // 鼠标移入暂停播放,移出继续播放 var sliderWrap = document.querySelector('.slider-wrap'); sliderWrap.addEventListener('mouseover', function() { clearInterval(sliderInterval); }); sliderWrap.addEventListener('mouseout', function() { autoPlay(); }); ``` 以上代码实现了一个简单滑动效果,每隔2秒自动播放下一张图片,鼠标移入暂停播放,移出继续播放。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值