Форум Web-Мастеров в системе uCoz.

/* Share Stack Styles */              
.stack { position: fixed; bottom: 28px; right: 40px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {   
      display: block;
      position: absolute;
      top: 17px;
      right: 60px;
      height: 14px;     
      line-height: 14px;
      background-color:#000;
      border: 0;    
      padding: 3px 10px;    
      text-align: center;
      text-shadow: #000 1px 1px 1px;
      font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
      font-size: 12px;
      color: #fcfcfc;   
      border-radius: 10px;      
      opacity: .85;
      filter: alpha(opacity = 85);
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }
              

<div class="stack addthis_toolbox">
      <img src="images/stack.png" alt="stack"/>
      <ul id="stack" class="custom_images">
          <li><a class="addthis_button_facebook"><span>Facebook</span><img src="images/facebook.png" alt="Share to Facebook" /></a></li>
          <li><a class="addthis_button_stumbleupon"><span>StumbleUpon</span><img src="images/stumbleupon.png" alt="Stumble It" /></a></li>
          <li><a class="addthis_button_reddit"><span>Reddit</span><img src="images/reddit.png" alt="Share to Reddit" /></a></li>
          <li><a class="addthis_button_digg"><span>Delicious</span><img src="images/digg.png" alt="Share to Digg" /></a></li>
          <li><a class="addthis_button_more"><span>More...</span><img src="images/addthis.png" alt="More..." /></a></li>
      </ul>
</div>   

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ACCOUNT-ID"></script>

<script type="text/javascript">
$(function () {   
      // Stack initialize
      var openspeed = 300;
      var closespeed = 300;
      $('.stack>img').toggle(function(){
          var vertical = 0;
          var horizontal = 0;
          var $el=$(this);
          $el.next().children().each(function(){
              $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
              vertical = vertical + 55;
              horizontal = (horizontal+.75)*2;
          });
          $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
             .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
          $el.animate({paddingTop: '0'});
      }, function(){
          //reverse above
          var $el=$(this);
          $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
          $el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
          $el.animate({paddingTop: '35px'});
      });
        
      // Stacks additional animation
      $('.stack li a').hover(function(){
          $("img",this).animate({width: '56px'}, 100);
          $("span",this).animate({marginRight: '30px'});
      },function(){
          $("img",this).animate({width: '50px'}, 100);
          $("span",this).animate({marginRight: '0'});
      });
});}
</script>