Google+与AddThis共享堆栈

时间:2011-07-11 00:45:16

标签: javascript widget sharing addthis google-plus

我正在尝试使用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> 

但最终看起来像这样:

addthis share stack with google+

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

0 个答案:

没有答案