Maison > Article > interface Web > jquery implémente la fonction de sélection des couleurs

jquery implémente la fonction de sélection des couleurs

小云云original: 2018-01-23 09:39:551496parcourir

Nous savons que ps a une fonction de disparition des couleurs. Cet article présente principalement des exemples de jquery imitant la fonction de sélection de couleurs de ps, qui a une bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous, j'espère que cela pourra aider tout le monde.

1. Affichage des effets

2.code html : index.html

<!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>

3. Code du plug-in :

(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)

3, Appel de plug-in

$(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;)
  }
 })
 })

Recommandations associées :

Instance de javascript calculant la couleur du dégradé

Développement du contrôle des couleurs de police JavaScript

Méthode d'implémentation de JavaScript générant des couleurs aléatoires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery html

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemples d'opérations telles que déplacer, couper et copier des dossiers de fenêtres imités à l'aide de js et jqArticle suivant：Exemples d'opérations telles que déplacer, couper et copier des dossiers de fenêtres imités à l'aide de js et jq

Articles Liés

Voir plus