masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > jquery实现颜色拾取功能

jquery实现颜色拾取功能

小云云
Lepaskan： 2018-01-23 09:39:55
asal
1627 orang telah melayarinya

我们知道ps有颜色逝去功能，本文主要介绍jquery仿ps颜色拾取功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助到大家。

1.效果展示

2.html代码：index.html


1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Title</title>

 <script src="./jquery-1.12.4.min.js"></script>

</head>

<body>

<img class="source" style="float: left" src="./test2.jpg" alt="">

<p class="color" style="width: 150px;height: 150px;float: left;margin: 50px;background: #eee;"></p>

</body>

</html>

Salin selepas log masuk

3.插件代码：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

(function ($) {

 $.fn.pickerColor=function (option) {

  var opt ={

  ck:function () {}

  },_this=this

  opt=$.extend(opt,option);

  _this.on(&#39;click&#39;,function (e) {

  var canvasObj = &#39;<canvas id="canvasPickerColor" style="position: fixed;left: 50000px;top: 500px;"></canvas>&#39;;

  $(&#39;body&#39;).append(canvasObj);

  var cvs = document.getElementById("canvasPickerColor"),ctx =cvs.getContext(&#39;2d&#39;)

  cvs.height=1;cvs.width=1

  var img = new Image();

  img.src=_this.attr(&#39;src&#39;);

  var osX=e.offsetX,osY=e.offsetY

  ctx.drawImage(img,osX,osY,1,1,0,0,1,1);

  var imgData=ctx.getImageData(0,0,1,1);

  console.log(imgData)

  if(opt.ck) opt.ck(imgData.data[0]+&#39;,&#39;+imgData.data[1]+&#39;,&#39;+imgData.data[2]);

  })

 }

 })(jQuery)

Salin selepas log masuk

3，插件调用


1

2

3

4

5

6

7

8

$(function () {

 $(&#39;.source&#39;).pickerColor({

  ck:function (data) {

  console.log(data)

  $(&#39;.color&#39;).css(&#39;background&#39;,&#39;rgba(&#39;+data+&#39;,1)&#39;)

  }

 })

 })

Salin selepas log masuk

相关推荐：

javascript计算渐变颜色的实例

javascript字体颜色控件的开发

JavaScript生成随机颜色的实现方法

Atas ialah kandungan terperinci jquery实现颜色拾取功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
jquery Fungsi
Artikel sebelumnya：js和jq仿window文件夹移动、剪切、复制等操作实例讲解 Artikel seterusnya：jQuery插件zTree实现的多选树效果实例讲解
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan