0

我正在尝试使用 addthis.com 上的共享堆栈文档将 Google+ 按钮添加到我的 addthis 小部件（请参阅http://www.little-apps.org ）：

<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>Digg</span><img src="/images/digg.png" alt="Share to Digg" /></a></li>
        <li><a class="addthis_button_google_plusone"><span>Google+</span><img src="images/googleplus.png" /></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=ub3rst4r"></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>

但是当它最终看起来像这样时：

使用 google+ 添加此共享堆栈

有没有人知道如何让按钮看起来像其他按钮，或者是否有任何替代小部件可以像我现在拥有的那样悬停在页面上？

4

0 回答 0