jquery仿ps顏色拾取功能
更新時(shí)間：2017年03月08日 14:09:15 作者：小結(jié)巴巴吧
本文主要介紹jquery仿ps顏色拾取功能的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
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，插件調(diào)用
$(function () {
$('.source').pickerColor({
ck:function (data) {
console.log(data)
$('.color').css('background','rgba('+data+',1)')
}
})
})
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- jQuery獲取樣式中的背景顏色屬性值/顏色值
- Jquery顏色選擇器ColorPicker實(shí)現(xiàn)代碼
- jquery修改網(wǎng)頁(yè)背景顏色通過(guò)css方法實(shí)現(xiàn)
- JQuery獲取樣式中的background-color顏色值的問(wèn)題
- jquery實(shí)現(xiàn)效果比較好的table選中行顏色
- JQuery實(shí)現(xiàn)動(dòng)態(tài)適時(shí)改變字體顏色的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)Div層背景變顏色的方法
- jQuery 行背景顏色的交替顯示(隔行變色)實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色
- jquery實(shí)現(xiàn)將獲取的顏色值轉(zhuǎn)換為十六進(jìn)制形式的方法
相關(guān)文章
本文給大家匯總介紹了jQuery的四種選擇器的使用方法以及示例，非常的簡(jiǎn)單實(shí)用，希望對(duì)大家學(xué)習(xí)jquery能夠有所幫助。2016-06-06
Confirmer JQuery確認(rèn)對(duì)話(huà)框組件
點(diǎn)擊鏈接或按鈕時(shí)要確認(rèn)是否繼續(xù)當(dāng)前操作。2010-06-06
基于jQuery的試卷自動(dòng)排版系統(tǒng)實(shí)現(xiàn)代碼
題目提干、選擇題的選項(xiàng)、說(shuō)明文字可以包含多媒體信息（文字、圖片、列表、表格、視頻等等……）。2011-01-01
『jQuery』.html(),.text()和.val()的概述及使用
如何使用jQuery中的.html(),.text()和.val()三種方法，用于讀取，修改元素的html結(jié)構(gòu)，元素的文本內(nèi)容，以及表單元素的value值的方法2013-04-04
jquery實(shí)現(xiàn)煙花效果(面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了jquery面向?qū)ο髮?shí)現(xiàn)煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
Jquery左右滑動(dòng)插件之實(shí)現(xiàn)超級(jí)炫酷動(dòng)畫(huà)效果附源碼下載
這是一款基于jquery.pogo-slider插件實(shí)現(xiàn)的多個(gè)滑塊切換特效。本篇文章給大家介紹Jquery左右滑動(dòng)插件之實(shí)現(xiàn)超級(jí)炫酷動(dòng)畫(huà)效果，對(duì)jquery左右滑動(dòng)插件相關(guān)知識(shí)感興趣的朋友參考下2015-12-12
jQuery實(shí)現(xiàn)公告文字左右滾動(dòng)的實(shí)例代碼
這篇文章介紹了jQuery實(shí)現(xiàn)公告文字左右滾動(dòng)的實(shí)例代碼，有需要的朋友可以參考一下2013-10-10
jquery isType() 類(lèi)型判斷代碼，需要的朋友可以參考下。2011-02-02
jQuery時(shí)間插件jquery.clock.js用法實(shí)例(5個(gè)示例)
這篇文章主要介紹了jQuery時(shí)間插件jquery.clock.js用法,結(jié)合5個(gè)實(shí)例簡(jiǎn)單分析了jQuery時(shí)間插件jquery.clock.js的具體使用技巧,需要的朋友可以參考下2016-01-01
對(duì)于我們的用途，jQuery是一個(gè)更合適。 該js中 的功能更難以配置，這是需要我們的處理的，這是很難定義。2010-08-08