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
| function SpotLight(element) {
this.element = element;
this.x = element.width() / 2;
this.y = element.height() / 2;
this.show = function() {
element.hide();
element.removeClass("hide");
return element.fadeIn('fast');
};
this.hide = function(callback) {
element.fadeOut('fast', function() {
if (callback) {
return callback();
}
});
return element.addClass("hide");
};
this.move = function(opts) {
var endX, endY, obj;
obj = $.extend({}, {
start_x: this.x,
start_y: this.y,
x: this.x,
y: this.y,
aperture: "50%",
duration: 1000,
done: function() {}
}, opts);
endX = obj.x;
endY = obj.y;
obj.x = obj.start_x;
obj.y = obj.start_y;
return jQuery(obj).animate({
x: endX,
y: endY
}, {
duration: obj.duration,
step: function() {
var style, _i, _len, _ref;
_ref = ["-moz-radial-gradient(" + this.x + "px " + this.y + "px, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) " + this.aperture + ", rgba(0,0,0,0.8) 100%)", "-webkit-gradient(radial, " + this.x + "px " + this.y + "px, 0px, " + this.x + "px " + this.y + "px, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(" + this.aperture + ",rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.8)))", "-webkit-radial-gradient(" + this.x + "px " + this.y + "px, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) " + this.aperture + ",rgba(0,0,0,0.8) 100%)", "-o-radial-gradient(" + this.x + "px " + this.y + "px, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) " + this.aperture + ",rgba(0,0,0,0.8) 100%)", "-ms-radial-gradient(" + this.x + "px " + this.y + "px, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) " + this.aperture + ",rgba(0,0,0,0.8) 100%)", "radial-gradient(ellipse at " + this.x + "px " + this.y + "px, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) " + this.aperture + ",rgba(0,0,0,0.8) 100%)"];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
style = _ref[_i];
element.css({
"background": style
});
}
return true;
},
done: obj.done
});
};
return this;
}
// Example Usage:
var spotLight = new SpotLight($("#spotLight"))
spotLight.show();
spotLight.move({ x: 150, y: 650 });
|