首页 / 素材代码 / 分享精美的 社会化分享 素材

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

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

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

cmhello.com-201210024

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

html代码:

1
2
3
4
5
6
<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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 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代码:

1
2
3
4
5
6
7
8
9
10
11
12
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-repeattopleft;}
ul.social li.sinaweibo a {background-position:0px0px;}
ul.social li.sinaweibo a:hover{background-position:-24px0px;}
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;}

所需图片(另存为即可):

light-social

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

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

Return top