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

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

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

带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-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; }

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

light-social

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

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

© 2009-2020 CMHELLO.COM · 基于 WordPress
Return top