topical media & game development
lib-jquery-learning-code-11-parameters-jquery.shadow.js / js
// Step 1
// jQuery.fn.shadow = function() {
// return this.each(function() {
// var
// for (var i = 0; i < 5; i++) {
// originalElement
// .clone()
// .css({
// position: 'absolute',
// left:
// top: originalElement.offset().top + i,
// margin: 0,
// zIndex: -1,
// opacity: 0.1
// })
// .appendTo('body');
// }
// });
// };
// Step 2
// jQuery.fn.shadow = function(slices, opacity, zIndex) {
// return this.each(function() {
// var
// for (var i = 0; i < slices; i++) {
// originalElement
// .clone()
// .css({
// position: 'absolute',
// left:
// top: originalElement.offset().top + i,
// margin: 0,
// zIndex: zIndex,
// opacity: opacity
// })
// .appendTo('body');
// }
// });
// };
// Step 3
// jQuery.fn.shadow = function(opts) {
// return this.each(function() {
// var
// for (var i = 0; i < opts.slices; i++) {
// originalElement
// .clone()
// .css({
// position: 'absolute',
// left:
// top: originalElement.offset().top + i,
// margin: 0,
// zIndex: opts.zIndex,
// opacity: opts.opacity
// })
// .appendTo('body');
// }
// });
// };
// Step 4
// jQuery.fn.shadow = function(options) {
// var defaults = {
// slices: 5,
// opacity: 0.1,
// zIndex: -1
// };
// var opts = jQuery.extend(defaults, options);
//
// return this.each(function() {
// var
// for (var i = 0; i < opts.slices; i++) {
// originalElement
// .clone()
// .css({
// position: 'absolute',
// left:
// top: originalElement.offset().top + i,
// margin: 0,
// zIndex: opts.zIndex,
// opacity: opts.opacity
// })
// .appendTo('body');
// }
// });
// };
// Step 5
// jQuery.fn.shadow = function(options) {
// var defaults = {
// slices: 5,
// opacity: 0.1,
// zIndex: -1,
// sliceOffset: function(i) {
// return {x: i, y: i};
// }
// };
// var opts = jQuery.extend(defaults, options);
//
// return this.each(function() {
// var
// for (var i = 0; i < opts.slices; i++) {
// var offset = opts.sliceOffset(i);
// originalElement
// .clone()
// .css({
// position: 'absolute',
// left:
// top: originalElement.offset().top + offset.y,
// margin: 0,
// zIndex: opts.zIndex,
// opacity: opts.opacity
// })
// .appendTo('body');
// }
// });
// };
// Step 6
jQuery.fn.shadow = function(options) {
var opts = jQuery.extend({},
jQuery.fn.shadow.defaults, options);
return this.each(function() {
var originalElement
.clone()
.css({
position: 'absolute',
left: originalElement.offset().top + offset.y,
margin: 0,
zIndex: opts.zIndex,
opacity: opts.opacity
})
.appendTo('body');
}
});
};
jQuery.fn.shadow.defaults = {
slices: 5,
opacity: 0.1,
zIndex: -1,
sliceOffset: function(i) {
return {x: i, y: i};
}
};
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.