Advertisement
Guest User

Untitled

a guest
May 1st, 2010
722
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $(document)
  2. .ready(
  3.     function(){
  4.         portolio.initiate();
  5.     }
  6. );
  7.  
  8. /*
  9.     For each image, find all the offset siblings and
  10.     attach it to each element
  11.    
  12.     then when mousing over have it only adjust the offest siblings.
  13.    
  14.     Might want to limit to only the immediate siblings
  15. */
  16. var portolio = {
  17.     cachedElements : {},
  18.     offSet : 20,
  19.     curLeft :[],
  20.     curTop : [],
  21.     curRight : [],
  22.     curBottom : [],
  23.     initiate : function(){
  24.         this.cacheElements();
  25.         this.paint();
  26.         this.connect();
  27.     },
  28.     cacheElements : function(){
  29.         var self = this,
  30.         ce = self.cachedElements;
  31.         ce.canvas = $('#canvas');
  32.         ce.portItems = $('.port-item', ce.canvas);
  33.     },
  34.     paint : function(){
  35.         var self = this,
  36.         ce = self.cachedElements;
  37.         ce.portItems
  38.         .each(
  39.             function(){
  40.                 var that = $(this);
  41.                 that.data('good',false);
  42.                 that.width(function(){ return $(this).width()-24;});
  43.                 that.height(function(){ return $(this).height()-29;});
  44.                 var os = that.position();
  45.                 os.bottom = that.outerHeight() + os.top;//( that.outerHeight() - 29 ) + os.top;
  46.                 os.right = that.outerWidth() + os.left;//( that.outerWidth() - 24 ) + os.left;
  47.                
  48.                 that.data( 'coords', os );
  49.             }
  50.         );
  51.     },
  52.     connect : function(){
  53.         var self = this,
  54.         ce = self.cachedElements;
  55.        
  56.         ce.portItems
  57.         .mouseenter(
  58.             function( e ){
  59.                 var that = $(this);
  60.                 var coords = that.data('coords');
  61.                
  62.                 $(this)
  63.                 .siblings()
  64.                 .each(
  65.                     function(){
  66.                         var el = $(this);
  67.                         var elcoords = el.data('coords');
  68.                        
  69.                         if( coords.right <= elcoords.left ){
  70.                             self.curRight.push( el );
  71.                         }
  72.                        
  73.                         if( coords.bottom <= elcoords.top ){
  74.                             self.curBottom.push( el );
  75.                         }
  76.                        
  77.                         if( coords.left >= elcoords.right ){
  78.                             self.curLeft.push( el );
  79.                         }
  80.                        
  81.                         if( coords.top >= elcoords.bottom ){
  82.                             self.curTop.push( el );
  83.                         }
  84.                     }
  85.                 );
  86.                
  87.                 that.data('good',true);
  88.             }
  89.         )
  90.         .mouseout(
  91.             function(){
  92.                 $(this).data('good',false);
  93.                 self.curLeft = [];
  94.                 self.curTop = [];
  95.                 self.curRight = [];
  96.                 self.curBottom = [];
  97.  
  98.                 for( i = 0, length = self.curLeft.length; i < length; i++ ){
  99.                     var os = self.curLeft[i].data('coords');
  100.                     self.curLeft[i].css('left',os.left);
  101.                 }
  102.  
  103.                 for( i = 0, length = self.curTop.length; i < length; i++ ){
  104.                     var os = self.curTop[i].data('coords');
  105.                    
  106.                     self.curTop[i].css('top',os.top);
  107.                 }
  108.  
  109.                 for( i = 0, length = self.curRight.length; i < length; i++ ){
  110.                     var os = self.curRight[i].data('coords');
  111.                     self.curRight[i].css('left',os.left);
  112.                 }
  113.  
  114.                 for( i = 0, length = self.curBottom.length; i < length; i++ ){
  115.                     var os = self.curBottom[i].data('coords');
  116.                    
  117.                     self.curBottom[i].css('top',os.top);
  118.                 }
  119.             }
  120.         )
  121.         .mousemove(
  122.             function( e ){
  123.                 var that = $(this);
  124.                 if( that.data('good') ){
  125.                     var coords = that.data('coords');
  126.                     var offset = that.offset();
  127.                     var h = coords.bottom - coords.top;
  128.                     var w = coords.right - coords.left;
  129.                     var p = null, q = null, r = null;
  130.                    
  131.                     var x = e.pageX - (offset.left);
  132.                     var y = e.pageY - (offset.top);
  133.                     var dh = (h/2);
  134.                     var dw = (w/2);
  135.                    
  136.                     if( dh <= y ){
  137.                         p = h - y;
  138.                     }
  139.                     else{
  140.                         p = y;
  141.                     }
  142.                    
  143.                     if( dw <= x ){
  144.                         q = w - x;
  145.                     }
  146.                     else{
  147.                         q = x;
  148.                     }
  149.                    
  150.                     if( p > q ){
  151.                         r = (p/dh);
  152.                     }
  153.                     else{
  154.                         r = (p/dw);
  155.                     }
  156.  
  157.                     for( i = 0, length = self.curLeft.length; i < length; i++ ){
  158.                         var os = self.curLeft[i].data('coords');
  159.                         //self.curLeft[i].css('left',(os.left - (r*self.offSet) ));
  160.                        
  161.                         self.curLeft[i].stop().animate({left:(os.left - (r*self.offSet) )},500,'easeInOutQuad' );
  162.                     }
  163.  
  164.                     for( i = 0, length = self.curTop.length; i < length; i++ ){
  165.                         var os = self.curTop[i].data('coords');
  166.                        
  167.                         self.curTop[i].stop().animate({top:(os.top - (r*self.offSet) )},500,'easeInOutQuad' );
  168.                     }
  169.  
  170.                     for( i = 0, length = self.curRight.length; i < length; i++ ){
  171.                         var os = self.curRight[i].data('coords');
  172.                        
  173.                         self.curRight[i].stop().animate({left:(os.left + (r*self.offSet) )},500,'easeInOutQuad' );
  174.                     }
  175.  
  176.                     for( i = 0, length = self.curBottom.length; i < length; i++ ){
  177.                         var os = self.curBottom[i].data('coords');
  178.                        
  179.                         self.curBottom[i].stop().animate({top:(os.top + (r*self.offSet) )},500,'easeInOutQuad' );
  180.                     }
  181.                     /*self.curTop = [];
  182.                     self.curRight = [];
  183.                     self.curBottom = [];*/
  184.                 }
  185.             }
  186.         );
  187.     }
  188. };
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement