分享精美的社会化分享素材

倡萌美工不行，只好搜索些好的素材集成到主题中，今天分享一些精美的社会分享素材，

带jQuery提示功能的社会分享按钮

这是倡萌在 xququ.com 上看到的，实现方法记录如下：

html代码：

<ul class="social">
<li class="sinaweibo"><a href="http://weibo.com/1234" target="_blank">新浪微博</a></li>
<li class="qqweibo"><a href="http://t.qq.com/1234" target="_blank">腾讯微博</a></li>
<li class="email"><a href="mailto://china@1234.com" title="china@xququ.com">Email</a></li>
<li class="rss"><a href="" title="App Updates">RSS</a></li>
</ul>

jQuery代码：

// Tooltips
$(document).ready(function() {
	$("a[rel=tipsy]").tipsy({fade: true, gravity: 's', offset: 5, html: true});
 
	$("ul.social li a").each(function() {
		if($(this).attr("title")) {
			var title_text = $(this).attr("title");
		} else {
			var title_text = $(this).text();
		}
		$(this).tipsy({
				fade: true, 
				gravity: 'n', 
				offset: 5,
				title: function() {
					return title_text;
				}
		});
	});
});

需要先引用 jQuery 库，可参考《选择好的jQuery库(Google/Microsoft/SAE) 》

CSS代码：

ul.social {list-style: none;float: left;}
ul.social li {float: left;margin-right: 5px;}
ul.social li a {width: 24px;height: 24px;display: block;text-indent: -99999px;
     background: url('images/light-social.png') no-repeat top left;}
ul.social li.sinaweibo a { background-position: 0px 0px; }
ul.social li.sinaweibo a:hover { background-position: -24px 0px; }
ul.social li.qqweibo a { background-position: 0px -24px; }
ul.social li.qqweibo a:hover { background-position: -24px -24px; }
ul.social li.rss a { background-position: 0px -120px; }
ul.social li.rss a:hover { background-position: -24px -120px; }
ul.social li.email a { background-position: 0px -144px; }
ul.social li.email a:hover { background-position: -24px -144px; }

所需图片（另存为即可）：

今天就先分享这个，以后看到好的，再补充。

如果你也发现好看的，留言告诉倡萌哦！