使用jQuery制作颜色效果选择器

84 篇文章 0 订阅
28 篇文章 0 订阅

使用jQuery制作颜色效果选择器

教程地址原文地址(YouTube)

B站教程原文转载(bilibili)

两个视频的内容相同,第二个为转载

效果图

在这里插入图片描述

代码区

html

<div class="colors-container">
  <div class="color">
    <div class="color-hex">#000000</div>
  </div>
  <div class="color">
    <div class="color-hex">#000000</div>
  </div>
  <div class="color">
    <div class="color-hex">#000000</div>
  </div>
  <div class="color">
    <div class="color-hex">#000000</div>
  </div>

  <button class="refresh"><i class="fas fa-sync-alt"></i></button>
  <div class="copied">The color copied to clipboard.</div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans",sans-serif;
}

.colors-container{
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.color{
  flex: 25%;
  min-height: 220px;
  transition: .4s linear;
  cursor: pointer;
  position: relative;
}

.color:hover{
  filter: brightness(80%);
}

.color-hex{
  position: absolute;
  bottom: 10%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 24px;
  letter-spacing: 2px;
}
.refresh{
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  background-color: #000;
  outline: none;
  cursor: pointer;
  transition: .4s linear;
}

.refresh:hover{
  transform: rotate(180deg);
}

.copied{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background-color: #000;
  padding: 15px 40px;
  min-width: 340px;
  text-align: center;
  display: none;
}

@media screen and (max-width: 800px){
  .color{
    flex: 100%;
  }
}

JS

      //set random colors
      $('.refresh').click(function(){
        $('.color').each(function(){
          var rColor = '#' + Math.random().toString(16).substr(2,6);
          $(this).css('background-color',rColor);
          $(this).children(".color-hex").text(rColor);
        });
      }).trigger('click');

      //copy to clipboard
      $('.color').click(function(){
        var input = $("<input>");
        var color = $(this).children(".color-hex").text();    
        $('body').append(input);
        input.val(color).select();
        document.execCommand('copy');
        input.remove();
        $('.copied').fadeIn().delay(2000).fadeOut();
      });

教程地址原文地址(YouTube)

B站教程原文转载(bilibili)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值