;(function($){var PLUGIN_NAME = "kzwParallaxMap"; var ImplementationClass = function(target, config) { var settings = $.extend({}, $[PLUGIN_NAME].defaults, config); var myself = this, images = [],divs = [],waitParallax = false; $(target).data(PLUGIN_NAME, myself); function _constructor_() { var $t = $(target); settings.width = $t.width(); settings.height = $t.height(); settings.effectiveWidth = settings.width - 2 * settings.marginWidth; settings.effectiveHeight = settings.height - 2 * settings.marginHeight; settings.effectiveLeft = Math.round($t.offset().left) + settings.marginWidth; settings.effectiveTop = Math.round($t.offset().top) + settings.marginHeight; $t.css({'padding': "0px", 'margin': "0px", 'overflow': "hidden", 'position': "relative"}); $t.children('img').each(function(){this.complete ? registerImage(this) : $(this).on('load', function(){ registerImage(this); });}); $t.children('div[data-options]').each(function(){ var div = $(this).data('options'); if(div.noParallax) { return; } div.element = this; div.moveWidth = div.width - settings.width; div.moveHeight = div.height - settings.height; div.rx = settings.width / div.width; div.ry = settings.height / div.height; div.initX = div.left * div.rx; div.initY = div.top * div.ry; div.offsetX = 0; div.offsetY = 0; divs.push(div); $(this).css({'position': "absolute", 'top': div.initY + "px", 'left': div.initX + "px"}); }); $t.hover(hover, mouseOut); } function registerImage(img) { var $img = $(img); var image = {element: img, imageWidth: $img.width(), imageHeight: $img.height(), moveWidth: $img.width() - settings.width, moveHeight: $img.height() - settings.height};images.push(image); $img.css({'width': settings.width, 'height': settings.height, 'position': "absolute", 'top': "0px", 'left': "0px"}).show(); } $.extend( myself, { setOffset : function(x, y, w, h, complete) { for(var i = 0; i < divs.length; i++) { var $div = $(divs[i].element); divs[i].offsetX = x; divs[i].offsetY = y; waitParallax = true; $div.stop(); $("img", $div).animate({width: w, height: h}); $div.animate({left: divs[i].initX + divs[i].offsetX, top: divs[i].initY + divs[i].offsetY}, {complete: function () {waitParallax = false;complete();}}); } }, havingnopoint : "" }); _constructor_(); function hover(event) { for(var i = 0; i < images.length; i++) { $(images[i].element).stop().width(images[i].imageWidth).height(images[i].imageHeight); } $(target).on('mousemove', doParallax); if(settings.startEffect) { settings.startEffect(event); } } function mouseOut(event) { for(var i = 0; i < images.length; i++) { $(images[i].element).stop().animate({left: 0, top: 0, width: settings.width, height: settings.height}); } for (i = 0; i < divs.length; i++) { var $div = $(divs[i].element); if (!waitParallax) {$div.stop().animate({left: divs[i].initX + divs[i].offsetX, top: divs[i].initY + divs[i].offsetY});} } $(target).off('mousemove', doParallax); if(settings.endEffect) { settings.endEffect(event); } } function doParallax(event) { if(waitParallax) { return; } event.targetMouseLeft = event.pageX - Math.round($(target).offset().left); event.targetMouseTop = event.pageY - Math.round($(target).offset().top); var rx = (event.pageX - settings.effectiveLeft) / settings.effectiveWidth; var ry = (event.pageY - settings.effectiveTop) / settings.effectiveHeight; if(rx < 0) { rx = 0; } if(ry < 0) { ry = 0; } if(rx > 1) { rx = 1; } if(ry > 1) { ry = 1; } for(var i = 0; i < images.length; i++) { $(images[i].element).css({left: 0 - images[i].moveWidth * rx, top: 0 - images[i].moveHeight * ry}); } for(i = 0; i < divs.length; i++) { $(divs[i].element).css({left: (0 - divs[i].moveWidth * rx) + divs[i].left + divs[i].offsetX, top: (0 - divs[i].moveHeight * ry) + divs[i].top + divs[i].offsetY}) } if(settings.onEffect) { settings.onEffect(event); } } }; $[PLUGIN_NAME] = {defaults: {marginWidth: 0, marginHeight: 0, startEffect: null, onEffect: null, endEffect: null}}; $.fn[PLUGIN_NAME] = function(config){return this.each(function(i){new ImplementationClass(this, config);});}; })(jQuery);