jquery.hoverColor

kiyoken

2011-01-23 02:15:28

License: MIT License

Fork: 1

Fav: 3

View: 2260

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 126 lines
HTML 195 lines
CSS 2 lines

マウスオーバで画像の色変換 @ canvas

jquery.hoverColor
jQuery v1.4.4

/**
 * マウスオーバで画像の色変換 @ canvas
 * IEでは無理？
 */

<a><img id="imgSet" class="color"></a>
<a><img id="imgSet1" class="color1"></a>
<a><img id="imgSet2" class="color2"></a>
<a><img id="imgSet3" class="color3"></a>
<script>
  //http://www.kawa.net/works/js/data-scheme/base64.html
  //便利！
    var data = 'data:image/png;base64,'+
    'iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAK'+
    'TWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQ'+
    'WaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec'+
    '5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28A'+
    'AgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0'+
    'ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaO'+
    'WJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHi'+
    'wmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryM'+
    'AgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0l'+
    'YqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHi'+
    'NLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYA'+
    'QH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6c'+
    'wR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBie'+
    'whi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1c'+
    'QPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqO'+
    'Y4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hM'+
    'WEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgoh'+
    'JZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSU'+
    'Eko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/p'+
    'dLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Y'+
    'b1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7O'+
    'UndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsb'+
    'di97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W'+
    '7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83'+
    'MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxr'+
    'PGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW'+
    '2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1'+
    'U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd'+
    '8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H0'+
    '8PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+H'+
    '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'+
    'bMPR/x8AfwxecgfJt58AAAAASUVORK5CYII=';
    var elm1 = document.getElementById("imgSet"),
        elm2 = document.getElementById("imgSet1"),
        elm3 = document.getElementById("imgSet2"),
        elm4 = document.getElementById("imgSet3");
    elm1.src = elm2.src = elm3.src = elm4.src = data;
</script>

jquery.hoverColor

マウスオーバで画像の色変換 @ canvas/** * マウスオーバで画像の色変換 @ canvas * IEでは無理？ */ (function($,window,undefined) { var isIE8 = /MSIE ([0-9]{1,}[\.0-9]{0,})/i.test(navigator.userAgent); //------------------------------ // OPTION //------------------------------ var hoverColorOption = { enable : true, selector : 'img.color', time : 400, defaultAlpha : '0', overAlpha : '1', color : 'monochro', isTouch : true } //------------------------------ // PLUGIN //------------------------------ // hoverColor $.fn.hoverColor = function(param){ var op = hoverColorOption; if(param) op = $.extend({}, op, param); $(this).each(function(){ var element = $(this); if(!isIE8){ var canvas = document.createElement('canvas'), ctx, pixels, w, h, l, color = [], gray, i, rgb = []; switch(op.color) { case 'monochro': color = [1, 1, 1]; break; case 'sepia': color = [0.9, 0.7, 0.4]; break; default: rgb = HEX2RGB(op.color); color = [rgb[0]/255, rgb[1]/255, rgb[2]/255]; break; }; element.after(canvas); $(window).load(function(){ console.log('test'); ctx = canvas.getContext("2d"); w = element.width(); h = element.height(); element.parent().css({'width':parseInt(w)+'px','height':parseInt(h)+'px'}); $(canvas).attr({'width':w,'height':h, 'style':'position:absolute; top:0; left:0;'}); console $(canvas).fadeTo(0, op.defaultAlpha); ctx.drawImage(element[0], 0, 0); pixels = ctx.getImageData(0, 0, w, h); l = pixels.data.length; for(i=0; i<l; i+=4) { // NTSC Grayscale R*0.298912 + G*0.586611 + B*0.114478 rgb = [pixels.data[i + 0], pixels.data[i + 1], pixels.data[i + 2]]; gray = rgb[0]*0.299 + rgb[1]*0.587 + rgb[2]*0.114; pixels.data[i + 0] = gray * color[0]; pixels.data[i + 1] = gray * color[1]; pixels.data[i + 2] = gray * color[2]; } ctx.putImageData(pixels, 0, 0); }); //MouseEvent element.parent().bind('mouseover', function(e){ $(this).css('cursor','pointer'); $(canvas).stop(true).fadeTo(op.time, op.overAlpha); }).bind('mouseout', function(e){ $(this).css('cursor',"default"); $(canvas).stop(true).fadeTo(op.time, op.defaultAlpha); }); }else{ // IE8- $(window).load(function(){ element.parent().css({'width':element.width().toString()+'px','height':element.height().toString()+'px'}); }); //MouseEvent element.parent().bind(HOVER_START, function(e){ element.css('filter','progid:DXImageTransform.Microsoft.BasicImage(GrayScale='+op.overAlpha+')'); }).bind(HOVER_END, function(e){ element.css('filter','progid:DXImageTransform.Microsoft.BasicImage(GrayScale='+op.defaultAlpha+')'); }); element.css('filter','progid:DXImageTransform.Microsoft.BasicImage(GrayScale='+op.defaultAlpha+')'); } }).css({'display':'block','position':'absolute','top':'0','left':'0'}).parent().css({'display':'block','position':'relative'}); }; //------------------------------ // UTILITY //------------------------------ // #FF0000 > [255, 0, 0] function HEX2RGB(hex){ hex = (hex.indexOf("#") != -1)? hex.replace("#","") : hex; if(hex.length == 3){ hex = hex.substr(0,1)+hex.substr(0,1)+hex.substr(1,1)+hex.substr(1,1)+hex.substr(2,1)+hex.substr(2,1); } var color = parseInt(hex.replace("#", ""), 16); return [((color >> 16) & 0xff) , ((color >> 8) & 0xff) , (color & 0xff)]; } // [255, 0, 0] > #FF0000 function RGB2HEX(rgb){ return '#' + (((256 + rgb[0] << 8) + rgb[1] << 8) + rgb[2]).toString(16).slice(1); } //------------------------------ // DOM-READY initialize //------------------------------ $(function() { $(hoverColorOption.selector).hoverColor(); $('img.color1').hoverColor({color:'sepia', defaultAlpha:'1', overAlpha:'0'}); $('img.color2').hoverColor({color:'#FF0000', defaultAlpha:'1', overAlpha:'0'}); $('img.color3').hoverColor({color:'#00FF33',}); }); })(jQuery, this); <a><img id="imgSet" class="color"></a> <a><img id="imgSet1" class="color1"></a> <a><img id="imgSet2" class="color2"></a> <a><img id="imgSet3" class="color3"></a> <script> //http://www.kawa.net/works/js/data-scheme/base64.html //便利！ var data = 'data:image/png;base64,'+ 'iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAK'+ 'TWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQ'+ 'WaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec'+ '5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28A'+ 'AgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0'+ 'ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaO'+ 'WJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHi'+ 'wmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryM'+ 'AgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0l'+ 'YqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHi'+ 'NLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYA'+ 'QH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6c'+ 'wR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBie'+ 'whi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1c'+ 'QPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqO'+ 'Y4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hM'+ 'WEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgoh'+ 'JZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSU'+ 'Eko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/p'+ 'dLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Y'+ 'b1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7O'+ 'UndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsb'+ 'di97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W'+ '7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83'+ 'MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxr'+ 'PGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW'+ '2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1'+ 'U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd'+ '8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H0'+ '8PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+H'+ 'vqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsG'+ 'Lww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjg'+ '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'+ 'bMPR/x8AfwxecgfJt58AAAAASUVORK5CYII='; var elm1 = document.getElementById("imgSet"), elm2 = document.getElementById("imgSet1"), elm3 = document.getElementById("imgSet2"), elm4 = document.getElementById("imgSet3"); elm1.src = elm2.src = elm3.src = elm4.src = data; </script>body { background-color: #DDDDDD; font: 30px sans-serif; } a{float:left; display:block; width:200px; height:200px; margin-bottom:20px;}

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

kiyoken

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/lBss/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

fingaholic

GeckoTang

andrewsville:

animation canvas getImageData particle putImageData

Forked

sort by

forked: jquery.hoverColor

flashbackmin

127/195/2

jquery.hoverColor

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Tweet

Twitter

Discussion

Tags

Favorite by

Forked