Ver Mensaje Individual
  #2 (permalink)  
Antiguo 31/10/2011, 10:24
gabytokalix
 
Fecha de Ingreso: octubre-2011
Mensajes: 4
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: consulta efecto volando imagen con jquery

aqui dejo el otro js que hace lo del efecto:

Código Javascript:
Ver original
  1. [HIGHLIGHT="Javascript"]
  2. (function($,W,D){
  3.    
  4.     // Define all possible exit positions:
  5.     var exitPositions = {
  6.     /*    top: function(el) {
  7.             return {
  8.                 top: 0 - el.height(),
  9.                 left: el.offset().left
  10.             };
  11.         },
  12.         topLeft: function(el) {
  13.             return {
  14.                 top: 0 - el.height(),
  15.                 left: 0 - (el.width()/2)
  16.             };
  17.         },*/
  18.         topRight: function(el) {
  19.             return {
  20.                 top: 0 - el.height(),
  21.                 left: $(W).width() + (el.width()/2)
  22.             };
  23.         }/*,
  24.         left: function(el) {
  25.             return {
  26.                 top: el.offset().top,
  27.                 left: 0 - el.width()
  28.             };
  29.         },
  30.         right: function(el) {
  31.             return {
  32.                 top: el.offset().top,
  33.                 left: $(W).width() + el.width()
  34.             };
  35.         },
  36.         btmLeft: function(el) {
  37.             return {
  38.                 top: getWindowHeight() + el.height(),
  39.                 left: 0 - (el.width()/2)
  40.             };
  41.         },
  42.         btmRight: function(el) {
  43.             return {
  44.                 top: getWindowHeight() + el.height(),
  45.                 left: getWindowHeight() + (el.width()/2)
  46.             };
  47.         },
  48.         btm: function(el) {
  49.             return {
  50.                 top: getWindowHeight(),
  51.                 left: el.offset().left
  52.             };
  53.         }*/
  54.     };
  55.    
  56.     function getWindowHeight() {
  57.         return W.innerHeight || $(window).height();  
  58.     }
  59.    
  60.     function randDirection() {
  61.        
  62.         var directions = [],
  63.             count = 0;
  64.        
  65.         // Loop through available exit positions:
  66.         for (var i in exitPositions) {
  67.             // Push property name onto new array:
  68.             directions.push(i);
  69.             count++;
  70.         }
  71.        
  72.         // Return random directions property (corresponds to exitPositions properties):
  73.         return directions[ parseInt(Math.random() * count, 10) ];
  74.    
  75.     }
  76.    
  77.     function prepareOverflow() {
  78.        
  79.         // The various overflow settings will be set to hidden,
  80.         // but only if it does not conflict with the current document:
  81.         var oX = $(D).width() <= $(W).width(),
  82.             oY = $(D).height() <= $(W).height(),
  83.             oR = oX && oY;
  84.         oX && $('body').css('overflow-x','hidden');
  85.         oY && $('body').css('overflow-y','hidden');
  86.         oR && $('body').css('overflow','hidden');
  87.        
  88.     }
  89.    
  90.     function flyElement(s) {
  91.        
  92.         // Main functionality of plugin:
  93.        
  94.         // Create shortcut to element:
  95.         var el = $(this),
  96.        
  97.             // Handle random direction:
  98.             direction = s.direction.toLowerCase() === 'random' ? randDirection() : s.direction,
  99.        
  100.             // New objext: Tweens - All tweens, including user-defined ones and ours:
  101.             // (Gives our tweens precedence):
  102.             tweens = $.extend(s.tween, exitPositions[direction](el)),
  103.            
  104.             // Define all properties associated with layout/position:
  105.             positionProps = 'position,left,top,bottom,right,width,height,paddingTop,paddingRight,paddingBottom,paddingLeft,marginTop,marginRight,marginBottom,marginLeft,zIndex,overflow,clip,display',
  106.             // New element: clone of original (remove unique identifier):
  107.             // (Must re-apply all layout styles because the ID may have been CSS hook):
  108.             clone = $(el.clone())
  109.                         .removeAttr('id')
  110.                         .attr('id', 'replaced-element-' + (+new Date()))
  111.                         .css((function(){
  112.                             // Loop through each position/layout property
  113.                             // and return object containing all:
  114.                             var props =  positionProps.split(','),
  115.                                 length = props.length,d
  116.                                 styles = {};
  117.                             while(length--) { styles[props[length]] = el.css(props[length]); }
  118.                             return styles;
  119.                         })());
  120.        
  121.         // Prepare document overflows:
  122.         prepareOverflow();
  123.  
  124.         $(el)
  125.            
  126.             // Style new element:
  127.             .css({
  128.                 left: tweens.left ? el.offset().left : null,
  129.                 top: tweens.top ? el.offset().top : null,
  130.                 position: 'absolute',
  131.                 zIndex: 999,
  132.                 width: el.outerWidth(),
  133.                 height: el.outerHeight()
  134.             })
  135.            
  136.             // Animate using collective 'tweens' object:
  137.             .animate(tweens, s.duration, function(){
  138.                 // On comepletion, remove the animated element:
  139.                 el.remove();
  140.             })
  141.            
  142.             .filter(function(){
  143.                 // Filter:
  144.                 // (will only continue with chain if user set 'retainSpace' to true)
  145.                 return !!s.retainSpace;
  146.             })
  147.            
  148.             // Insert clone before original element: (make clone invisible)
  149.             .before($(clone).css('opacity',0));
  150.  
  151.             if (s.retainSpace && typeof s.retainSpace === 'object') {
  152.                 $(clone).animate(s.retainSpace, s.duration, function(){
  153.                     $(this).remove();
  154.                 });
  155.             }
  156.        
  157.     }
  158.    
  159.     // Expose functionality to jQuery namespace:
  160.     $.fn.flyOffPage = function(userDefinedSettings) {
  161.        
  162.         // Define settings
  163.         var s = $.extend({
  164.             direction: 'random',
  165.             tween: {},
  166.             retainSpace: true,
  167.             duration: 1800
  168.         }, userDefinedSettings);
  169.        
  170.         // Initiate:
  171.         return this.each(function(){
  172.             flyElement.call(this,s);
  173.         });
  174.        
  175.     };
  176.    
  177. })(jQuery,window,document);
[/HIGHLIGHT]