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

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

带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

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

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

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

最后编辑于:2012/11/23作者: 胡倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

11 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. 斌果 斌果说道:
    7#

    貌似图片的名字和CSS的对不上啊 :?: :?: :?: :?: :?:
    而且。。。Tooltips不生效

    • 斌果 斌果说道:

      准确的是没有Tooltips的CSS

  2. 搞笑 搞笑说道:
    6#

    图标很漂亮,发现这个网站的文章都挺好的 :razz:

  3. Musk Musk说道:
    5#

    这个可以收藏

  4. 免费资源部落 免费资源部落说道:
    4#

    你的首页的推荐是竖着排列的,难道是我的CSS没有加载完成?

    • 胡倡萌 胡倡萌说道:

      那是js文件没有加载

  5. 大猫 大猫说道:
    3#

    具体效果demo呢

    • 胡倡萌 胡倡萌说道:

      在文章中都给出了来源网站了,要看效果就自己去看看咯

  6. Louis Han Louis Han说道:
    2#

    相当精美简洁啊

  7. 茶话汇 茶话汇说道:
    1#

    我对通过CSS去定义显示图片中某部分内容不熟悉,兄台是否有介绍这方面的文章?

    • 胡倡萌 胡倡萌说道:

      自己搜索下 css精灵

扫一扫,用手机访问本站

扫一扫,用手机访问本站