1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
/*
* Hover PNG by OKFocus - http://okfoc.us - @okfocus
* Version 1.0
* Licensed under MIT.
*
*/
(function($){
$.hoverpng = function(el, options){
var base = this;
base.$el = $(el);
base.el = el;
base.$el.data("hoverpng", base);
var active = true, hovering = false;
var canvas, imageData = null;
base.init = function(){
base.options = $.extend({}, $.hoverpng.options, options);
base.options.threshold = Math.floor( base.options.threshold *= 254 );
base.build();
};
base.build = function(){
$(window).bind({
'blur': function(){ hovering = false; }
});
base.$el.bind({
'load': base.fetch,
'mouseover': base.mouseover,
'mouseout': base.mouseout,
'mousemove': base.mousemove
});
if (base.el.complete) {
base.fetch();
}
};
base.fetch = function(){
canvas = document.createElement("canvas");
canvas.width = base.el.naturalWidth;
canvas.height = base.el.naturalHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(base.el, 0, 0);
imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height ).data;
}
base.clamp = function (x, min, max) {
return Math.max(min, Math.min(max, x));
};
base.mouseover = function(e) {
if ( base.detect(e) ) {
hovering = true;
base.options.mouseover(e);
}
}
base.mouseout = function(e) {
if ( hovering ) {
base.options.mouseout(e);
}
hovering = false;
}
base.mousemove = function(e) {
if ( base.detect(e) ) {
if ( hovering ) {
xxx = e;
base.options.mousemove(e);
}
else {
base.options.mouseover(e);
}
hovering = true;
}
else if ( hovering ) {
base.options.mouseout(e);
hovering = false;
}
}
base.detect = function (e){
if (! imageData) {
return false;
}
var offset = base.$el.offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
var pixelOffset = (canvas.width * y + x) * 4;
var alpha = imageData[ pixelOffset + 3 ];
e.rgba = [
imageData[(canvas.width * y + x) * 4 ],
imageData[(canvas.width * y + x) * 4 + 1 ],
imageData[(canvas.width * y + x) * 4 + 2 ],
imageData[(canvas.width * y + x) * 4 + 3 ]
];
e.alpha = alpha;
return alpha > base.options.threshold;
}
base.init();
};
$.hoverpng.options = {
mouseover: function(){},
mousemove: function(){},
mouseout: function(){},
threshold: 0
};
$.fn.hoverpng = function(options){
return this.each(function(){
(new $.hoverpng(this, options));
});
};
function detectMobile () {
return navigator.userAgent.indexOf("Mobile") !== -1 || navigator.userAgent.indexOf("Android") !== -1;
}
})(jQuery);
|
