|
|
| Line 228: |
Line 228: |
| | } | | } |
| | </style> | | </style> |
| − |
| |
| − | <script src="http://code.jquery.com/jquery-latest.js"></script>
| |
| − | <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
| |
| − |
| |
| − | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
| |
| − |
| |
| − | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | (function($) {
| |
| − |
| |
| − | 'use strict';
| |
| − |
| |
| − | var methods = {
| |
| − | init : function(settings) {
| |
| − |
| |
| − | // Set default parameters
| |
| − | var defaultSettings = {
| |
| − | easing: 'ease', // Easing transition
| |
| − | duration: 700, // Duration of animation
| |
| − | margins: false, // Whether or not to include margins
| |
| − | setOnClick: false, // Whether or not to set the new active element on click
| |
| − | activeObj: '.active', // Selector for the active element
| |
| − | autoUpdate: false, // Update every interval
| |
| − | updateTime: 100, // Time between update checks
| |
| − | enableHover: true, // lavalamp moves with hover instead of click
| |
| − | delayOn: 0, // Delay time on hover
| |
| − | delayOff: 0, // Delay time off hover
| |
| − | enableFocus: false, // Animate on keyboard focus
| |
| − | deepFocus: false, // Animate on decendant focus
| |
| − | }; // End options
| |
| − |
| |
| − | // Override default options
| |
| − | settings = $.extend({}, defaultSettings, settings);
| |
| − |
| |
| − | return this.each(function(){
| |
| − |
| |
| − | // Get the options
| |
| − | var margins = settings.margins;
| |
| − | var setOnClick = settings.setOnClick;
| |
| − | var activeObj = settings.activeObj;
| |
| − | var autoUpdate = settings.autoUpdate;
| |
| − | var updateTime = settings.updateTime;
| |
| − | var enableHover = settings.enableHover;
| |
| − | var delayOn = settings.delayOn;
| |
| − | var delayOff = settings.delayOff;
| |
| − | var enableFocus = settings.enableFocus;
| |
| − | var deepFocus = settings.deepFocus;
| |
| − | var duration = settings.duration;
| |
| − | var easing = settings.easing;
| |
| − |
| |
| − | // Set variables
| |
| − | var list = $(this);
| |
| − | var items = list.children();
| |
| − | var active = list.children(activeObj);
| |
| − |
| |
| − | // Check if active element exists
| |
| − | if (active.length === 0) {
| |
| − | active = items.eq(0);
| |
| − | }
| |
| − |
| |
| − | // Set variables to object
| |
| − | list.addClass('lavalamp').data({
| |
| − | lavalampActive: active,
| |
| − | isAnim: false,
| |
| − | settings: settings
| |
| − | });
| |
| − |
| |
| − | // Create lavalamp object
| |
| − | var obj = $('<div class="lavalamp-object '+easing+'" />').prependTo(list);
| |
| − | items.addClass('lavalamp-item');
| |
| − |
| |
| − | // Check for CSS3 animations
| |
| − | obj.css({
| |
| − | WebkitTransitionDuration: duration / 1000 + 's',
| |
| − | msTransitionDuration: duration / 1000 + 's',
| |
| − | MozTransitionDuration: duration / 1000 + 's',
| |
| − | OTransitionDuration: duration / 1000 + 's',
| |
| − | transitionDuration: duration / 1000 + 's',
| |
| − | });
| |
| − |
| |
| − | var w = active.outerWidth(margins);
| |
| − | var h = active.outerHeight(margins);
| |
| − | var t = active.position().top;
| |
| − | var l = active.position().left;
| |
| − | var mt = active.css('marginTop');
| |
| − | var ml = active.css('marginLeft');
| |
| − |
| |
| − | // Add margins to calculations
| |
| − | if(!margins) {
| |
| − | ml = parseInt(ml);
| |
| − | mt = parseInt(mt);
| |
| − |
| |
| − | l = l + ml;
| |
| − | t = t + mt;
| |
| − | }
| |
| − |
| |
| − | obj.css({
| |
| − | width: w,
| |
| − | height: h,
| |
| − | transform: 'translate('+l+'px,'+t+'px)'
| |
| − | });
| |
| − |
| |
| − | var onHover = false; // check if item is still hovered after delay
| |
| − | var enAnim = true; // temporarily disable animations when in focus
| |
| − | lavalampEnter = function() {
| |
| − | var des = $(this);
| |
| − | onHover = true;
| |
| − |
| |
| − | // delay and animate
| |
| − | setTimeout(function() {
| |
| − | if (onHover && enAnim) {
| |
| − | list.lavalamp('anim',des);
| |
| − | }
| |
| − | },delayOn);
| |
| − |
| |
| − | }; // end mousenter
| |
| − | lavalampLeave = function(des) {
| |
| − | des = list.data('lavalampActive');
| |
| − | onHover = false;
| |
| − |
| |
| − | // delay and animate
| |
| − | setTimeout(function() {
| |
| − | if (!onHover && enAnim) {
| |
| − | list.lavalamp('anim',des);
| |
| − | }
| |
| − | },delayOff);
| |
| − |
| |
| − | }; // end mouseleave
| |
| − |
| |
| − | focusIn = function() {
| |
| − | var des = $(this);
| |
| − |
| |
| − | // Back out of deep decendents
| |
| − | if (!des.hasClass('lavalamp-item')) {
| |
| − | des = des.parents('.lavalamp-item');
| |
| − | }
| |
| − |
| |
| − | enAnim = false;
| |
| − |
| |
| − | // delay and animate
| |
| − | setTimeout(function() {
| |
| − | list.lavalamp('anim',des);
| |
| − | },delayOn);
| |
| − |
| |
| − | }; // end focus in
| |
| − | focusOut = function() {
| |
| − | enAnim = true;
| |
| − |
| |
| − | var des = list.data('lavalampActive');
| |
| − |
| |
| − | // delay and animate
| |
| − | setTimeout(function() {
| |
| − | list.lavalamp('anim',des);
| |
| − | },delayOff);
| |
| − | }; // end focus out
| |
| − |
| |
| − | // items.hover(enter, leave);
| |
| − |
| |
| − |
| |
| − | if (enableHover) {
| |
| − | list.on('mouseenter','.lavalamp-item',lavalampEnter);
| |
| − | list.on('mouseleave','.lavalamp-item',lavalampLeave);
| |
| − | }
| |
| − | if (enableFocus) {
| |
| − | list.on('focusin','.lavalamp-item',focusIn);
| |
| − | list.on('focusout','.lavalamp-item',focusOut);
| |
| − | }
| |
| − | if (deepFocus) {
| |
| − | list.on('focusin','.lavalamp-item *',focusIn);
| |
| − | list.on('focusout','.lavalamp-item *',focusOut);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | if (setOnClick) {
| |
| − | items.click(function() {
| |
| − | active = $(this);
| |
| − | list.data('lavalampActive',active).lavalamp('update');
| |
| − | });
| |
| − | } // End set on click
| |
| − |
| |
| − | if (autoUpdate) {
| |
| − | var updateInterval = setInterval(function() {
| |
| − | var isAnim = list.data('isAnim');
| |
| − | if (!onHover && !isAnim) {
| |
| − | list.lavalamp('update');
| |
| − | }
| |
| − | }, updateTime); // End setinterval
| |
| − |
| |
| − | list.data('updateInterval',updateInterval);
| |
| − | } // End auto update
| |
| − | }); // End object loop
| |
| − |
| |
| − | }, // End init
| |
| − | destroy : function() {
| |
| − | return this.each(function(){
| |
| − | var list = $(this);
| |
| − | var settings = list.data('settings');
| |
| − | var items = list.children('.lavalamp-item');
| |
| − | var enableHover = settings.enableHover;
| |
| − | var enableFocus = settings.enableFocus;
| |
| − | var deepFocus = settings.deepFocus;
| |
| − | var autoUpdate = settings.autoUpdate;
| |
| − |
| |
| − | // Unbind the plugin effect
| |
| − | if (enableHover) {
| |
| − | list.off('mouseenter', '.lavalamp-item', lavalampEnter);
| |
| − | list.off('mouseleave', '.lavalamp-item', lavalampLeave);
| |
| − | }
| |
| − | if (enableFocus) {
| |
| − | list.off('focusin','.lavalamp-item',focusIn);
| |
| − | list.off('focusout','.lavalamp-item',focusOut);
| |
| − | }
| |
| − | if (deepFocus) {
| |
| − | list.off('focusin','.lavalamp-item *',focusIn);
| |
| − | list.off('focusout','.lavalamp-item *',focusOut);
| |
| − | }
| |
| − |
| |
| − | // Remove CSS
| |
| − | list.removeClass('lavalamp');
| |
| − | items.removeClass('lavalamp-item');
| |
| − |
| |
| − | // remove auto update
| |
| − | if (autoUpdate) {
| |
| − | var updateInterval = list.data('updateInterval');
| |
| − | clearInterval(updateInterval);
| |
| − | } // End auto update
| |
| − |
| |
| − | // Remove the lavalamp object
| |
| − | list.children('.lavalamp-object').remove();
| |
| − |
| |
| − | // Remove data from wrapper
| |
| − | list.removeData();
| |
| − |
| |
| − | });
| |
| − | }, // End destroy
| |
| − | update : function () {
| |
| − | return this.each(function(){
| |
| − | var list = $(this);
| |
| − | var items = list.children(':not(.lavalamp-object)');
| |
| − | var active = list.data('lavalampActive');
| |
| − |
| |
| − | // reset list objects
| |
| − | items.addClass('lavalamp-item').css({
| |
| − | zIndex:5,
| |
| − | position:'relative'
| |
| − | });
| |
| − |
| |
| − | // reset to active item
| |
| − | list.lavalamp('anim',active);
| |
| − |
| |
| − | });
| |
| − | }, // End update
| |
| − | anim : function(destination) {
| |
| − | var list = this;
| |
| − | var settings = list.data('settings');
| |
| − | var duration = settings.duration;
| |
| − | var margins = settings.margins;
| |
| − |
| |
| − | var obj = list.children('.lavalamp-object');
| |
| − |
| |
| − | var w = destination.outerWidth(margins);
| |
| − | var h = destination.outerHeight(margins);
| |
| − | var t = destination.position().top;
| |
| − | var l = destination.position().left;
| |
| − | var mt = destination.css('marginTop');
| |
| − | var ml = destination.css('marginLeft');
| |
| − |
| |
| − | // Add margins to calculations
| |
| − | if(!margins) {
| |
| − | ml = parseInt(ml);
| |
| − | mt = parseInt(mt);
| |
| − |
| |
| − | l = l + ml;
| |
| − | t = t + mt;
| |
| − | }
| |
| − |
| |
| − | list.data('isAnim',true);
| |
| − | obj.css({
| |
| − | width: w,
| |
| − | height: h,
| |
| − | transform: 'translate('+l+'px,'+t+'px)'
| |
| − | });
| |
| − | setTimeout(function() {
| |
| − | list.data('isAnim',false);
| |
| − | },duration);
| |
| − | } // End animate
| |
| − | }; // End method
| |
| − |
| |
| − |
| |
| − | $.fn.lavalamp = function(method) {
| |
| − |
| |
| − | if ( methods[method] ) {
| |
| − | return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
| |
| − | } else if ( typeof method === 'object' || ! method ) {
| |
| − | return methods.init.apply( this, arguments );
| |
| − | } else {
| |
| − | $.error( 'Method ' + method + ' does not exist on jQuery.lavalamp' );
| |
| − | }
| |
| − |
| |
| − | }; // End plugin
| |
| − |
| |
| − | // Create outer variables
| |
| − | var lavalampEnter, lavalampLeave, focusIn, focusOut;
| |
| − |
| |
| − | })(jQuery);
| |
| − | </script>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − |
| |
| − | !function(a){"use strict";var t={init:function(t){var o={easing:"ease",duration:700,margins:!1,setOnClick:!1,activeObj:".active",autoUpdate:!1,updateTime:100,enableHover:!0,delayOn:0,delayOff:0,enableFocus:!1,deepFocus:!1};return t=a.extend({},o,t),this.each(function(){var o=t.margins,s=t.setOnClick,m=t.activeObj,r=t.autoUpdate,p=t.updateTime,u=t.enableHover,v=t.delayOn,c=t.delayOff,d=t.enableFocus,f=t.deepFocus,h=t.duration,g=t.easing,b=a(this),T=b.children(),y=b.children(m);0===y.length&&(y=T.eq(0)),b.addClass("lavalamp").data({lavalampActive:y,isAnim:!1,settings:t});var A=a('<div class="lavalamp-object '+g+'" />').prependTo(b);T.addClass("lavalamp-item"),A.css({WebkitTransitionDuration:h/1e3+"s",msTransitionDuration:h/1e3+"s",MozTransitionDuration:h/1e3+"s",OTransitionDuration:h/1e3+"s",transitionDuration:h/1e3+"s"});var j=y.outerWidth(o),I=y.outerHeight(o),O=y.position().top,C=y.position().left,x=y.css("marginTop"),D=y.css("marginLeft");o||(D=parseInt(D),x=parseInt(x),C+=D,O+=x),A.css({width:j,height:I,transform:"translate("+C+"px,"+O+"px)"});var F=!1,H=!0;if(e=function(){var t=a(this);F=!0,setTimeout(function(){F&&H&&b.lavalamp("anim",t)},v)},i=function(a){a=b.data("lavalampActive"),F=!1,setTimeout(function(){!F&&H&&b.lavalamp("anim",a)},c)},n=function(){var t=a(this);t.hasClass("lavalamp-item")||(t=t.parents(".lavalamp-item")),H=!1,setTimeout(function(){b.lavalamp("anim",t)},v)},l=function(){H=!0;var a=b.data("lavalampActive");setTimeout(function(){b.lavalamp("anim",a)},c)},u&&(b.on("mouseenter",".lavalamp-item",e),b.on("mouseleave",".lavalamp-item",i)),d&&(b.on("focusin",".lavalamp-item",n),b.on("focusout",".lavalamp-item",l)),f&&(b.on("focusin",".lavalamp-item *",n),b.on("focusout",".lavalamp-item *",l)),s&&T.click(function(){y=a(this),b.data("lavalampActive",y).lavalamp("update")}),r){var k=setInterval(function(){var a=b.data("isAnim");F||a||b.lavalamp("update")},p);b.data("updateInterval",k)}})},destroy:function(){return this.each(function(){var t=a(this),o=t.data("settings"),s=t.children(".lavalamp-item"),m=o.enableHover,r=o.enableFocus,p=o.deepFocus,u=o.autoUpdate;if(m&&(t.off("mouseenter",".lavalamp-item",e),t.off("mouseleave",".lavalamp-item",i)),r&&(t.off("focusin",".lavalamp-item",n),t.off("focusout",".lavalamp-item",l)),p&&(t.off("focusin",".lavalamp-item *",n),t.off("focusout",".lavalamp-item *",l)),t.removeClass("lavalamp"),s.removeClass("lavalamp-item"),u){var v=t.data("updateInterval");clearInterval(v)}t.children(".lavalamp-object").remove(),t.removeData()})},update:function(){return this.each(function(){var t=a(this),e=t.children(":not(.lavalamp-object)"),i=t.data("lavalampActive");e.addClass("lavalamp-item").css({zIndex:5,position:"relative"}),t.lavalamp("anim",i)})},anim:function(a){var t=this,e=t.data("settings"),i=e.duration,n=e.margins,l=t.children(".lavalamp-object"),o=a.outerWidth(n),s=a.outerHeight(n),m=a.position().top,r=a.position().left,p=a.css("marginTop"),u=a.css("marginLeft");n||(u=parseInt(u),p=parseInt(p),r+=u,m+=p),t.data("isAnim",!0),l.css({width:o,height:s,transform:"translate("+r+"px,"+m+"px)"}),setTimeout(function(){t.data("isAnim",!1)},i)}};a.fn.lavalamp=function(e){return t[e]?t[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void a.error("Method "+e+" does not exist on jQuery.lavalamp"):t.init.apply(this,arguments)};var e,i,n,l}(jQuery);
| |
| − | </script>
| |
| − |
| |
| | </html> | | </html> |
