jquery仿ps颜色拾取功能

1.效果展示

2.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="">
<div class="color" style="width: 150px;height: 150px;float: left;margin: 50px;background: #eee;"></div>
</body>
</html>

　　

3.插件代码：

(function ($) {
 $.fn.pickerColor=function (option) {
  var opt ={
  ck:function () {}
  },_this=this
  opt=$.extend(opt,option);
  _this.on('click',function (e) {
  var canvasObj = '<canvas id="canvasPickerColor" style="position: fixed;left: 50000px;top: 500px;"></canvas>';
  $('body').append(canvasObj);
  var cvs = document.getElementById("canvasPickerColor"),ctx =cvs.getContext('2d')
  cvs.height=1;cvs.width=1
  var img = new Image();
  img.src=_this.attr('src');
  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]+','+imgData.data[1]+','+imgData.data[2]);
  })
 }
 })(jQuery)

3，插件调用

$(function () {
 $('.source').pickerColor({
  ck:function (data) {
  console.log(data)
  $('.color').css('background','rgba('+data+',1)')
  }
 })
 })

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • Jquery颜色选择器ColorPicker实现代码

    Jquery颜色选择器ColorPicker实现代码

    在CMS中通常都有给标题添加颜色的功能,但一般都比较简单,颜色支持也少,这里我要分享一个自己修改的颜色选择器.界面简洁,功能强大.在我们的日常项目中可以快速的部署. 复制代码 代码如下: $(".colorpicker").colorpicker({ target:'#title', success:function(o,color){ $("#color").val(color) }, reset:function(o){ $("#color"

  • jQuery 行背景颜色的交替显示(隔行变色)实现代码

    一些css的定义,可以根据需要自己选择.//显示单双行显示不同背景色[方法一]: // $("#UL_id li:even").attr("className","redClass"); //显示单双行显示不同背景色[方法二]: $("#UL_id li:even").addClass("redClass"); <ul id="UL_id"> <li>单数<

  • jQuery获取样式中的背景颜色属性值/颜色值

    天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示#ffff00,而Chrome.Firefox中则是以GRB格式显示rgb(255,0,0),由于需要将颜色值存储到数据库中,所以想让颜色值的格式统一下(其实不统一也是可以存的).搜索了一下,从国外的一个网站上得到一段代码 复制代码 代码如下: $.fn.getHexBackgroundColor = function() { v

  • jQuery实现鼠标滑过Div层背景变颜色的方法

    本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="text/css"> .divbox{   height:300px;   width:200px;   background:#ffffff;   border

  • jquery实现将获取的颜色值转换为十六进制形式的方法

    本文实例讲述了jquery实现将获取的颜色值转换为十六进制形式的方法.分享给大家供大家参考.具体分析如下: 大家或许已经注意到了,在谷歌.火狐和IE8以上浏览器中,获取的颜色值是RGB形式,例如rgb(255,255,0),感觉非常不适应,或者在实际编码中不方便使用,这个时候就需要进行转换,下面就提供一段相关转换代码. 具体代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf

  • jquery修改网页背景颜色通过css方法实现

    jquery修改网页背景颜色通过css方法实现

    我们在浏览一些网站,尤其是一些小说网站的时候,都会有修改页面背景颜色的地方,这个功能使用jquery很容易实现. 效果图:  show you code: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.j

  • jQuery实现响应浏览器缩放大小并改变背景颜色

    /*Javascript代码片段*/ //定义一个方法:这个方法控制浏览器页面背景色的切换变化 function myfunction(){ $('body').toggleClass('bgcolor'); } //添加监控页面窗口变化的方法 $(window).resize(myfunction); //并且在页面加载时即调用 myfunction();

  • jquery实现效果比较好的table选中行颜色

    jquery实现效果比较好的table选中行颜色

    jquery table选中行颜色(效果更好) 复制代码 代码如下: <html> <head> <style type="text/css"> .table-tr-title{ height: 26px; font-size: 12px; text-align: center; } .table-tr-content{ height: 18px; background: #FFFFFF; text-align: center; font-size:

  • JQuery获取样式中的background-color颜色值的问题

    今天使用JQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示[#ffff00],而Chrome.Firefox中则是以GRB格式显示[rgb(255,255,0)],而我需要的是十六进制的颜色值,用于存储到数据库中,在网上找到下段代码能解决此问题: 复制代码 代码如下: $.fn.getHexBackgroundColor = function() { var rgb = $(this)

  • JQuery实现动态适时改变字体颜色的方法

    本文实例讲述了JQuery实现动态适时改变字体颜色的方法.分享给大家供大家参考.具体分析如下: JQuery动态适时改变字体的颜色,Ajax的效果类似,在文本框输入文字,再选择色块,输入的文字就会变成色块标示的颜色值,很不错的效果吧.如果运行有错,请刷新一次页面即可. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

随机推荐