Jquery实现弹出层分享微博插件具备动画效果

摘要：此Jquery插件是一款非常实用的特效，是很多网站不可缺少的推广神兵利器，传统的一般都用百度、加网的分享插件，但样式外观都不怎么好看，用户体...

此Jquery插件是一款非常实用的特效，是很多网站不可缺少的推广神兵利器，传统的一般都用百度、加网的分享插件，但样式外观都不怎么好看，用户体验效果差一点，此作品不但有分享功能，还具备了动画效果，提高了用户体验。由于用了CSS3，为了可以看到插件的最佳效果，建议大家使用谷歌、火狐等浏览器。。。

作品包括以下功能：

1、弹出层

2、遮罩层

3、动画效果

4、CSS3

效果如下：

Jquery实现弹出层分享微博插件具备动画效果1

代码片段(1)

复制代码代码如下:

$(document).ready(function(e) {

var share_html = "";

//share_html += '<a href="javascript:void(0)" id="smohan_share" title="分享"></a>';

share_html += '<div id="Share"><ul>';

share_html += '<li title="分享到QQ空间"><a href="javascript:void(0)"></a></li>';

share_html += '<li title="分享到新浪微博"><a href="javascript:void(0)"></a></li>';

share_html += '<li title="分享到人人网"><a href="javascript:void(0)" ></a></li>';

share_html += '<li title="分享到朋友网"><a href="javascript:void(0)"></a></li>';

share_html += '<li title="分享到腾讯微博"><a href="javascript:void(0)"></a></li>';

share_html += '<li title="分享到开心网"><a href="javascript:void(0)"></a></li>';

share_html += '</ul></div>';

$('body').prepend(share_html);

$('.share').SmohanPopLayer({Shade : true,Event:'click',Content : 'Share', Title : '分享Smohan到各大社区'});

$('#Share li').each(function() {

$(this).hover(function(e) {

$(this).find('a').animate({ marginTop: 2}, 'easeInOutExpo');

$(this).find('span').animate({opacity:0.2},'easeInOutExpo');

},function(){

$(this).find('a').animate({ marginTop: 12}, 'easeInOutExpo');

$(this).find('span').animate({opacity:1},'easeInOutExpo');

});

var share_url = encodeURIComponent(location.href);

var share_title = encodeURIComponent(document.title);

var share_pic = "http://www.smohan.net/images/smohan.png"; //默认的分享图片

var share_from = encodeURIComponent("水墨寒个人官方网站"); //分享自（仅用于QQ空间和朋友网，新浪的只需更改appkey 和 ralateUid就行）

//Qzone

$('#Share li a.share1').click(function(e) {

window.open("http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+share_url+"&title="+share_title+"&pics="+share_pic+"&site="+share_from+"","newwindow");

});

//Sina Weibo

$('#Share li a.share2').click(function(e) {

var param = {

url:share_url ,

appkey:'678438995',

title:share_title,

pic:share_pic,

ralateUid:'3061825921',

rnd:new Date().valueOf()

}

var temp = [];

for( var p in param ){

temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )

}

window.open('http://v.t.sina.com.cn/share/share.php?' + temp.join('&'));

});

//renren

$('#Share li a.share3').click(function(e) {

window.open('http://widget.renren.com/dialog/share?resourceUrl='+share_url+'&title='+share_title+'&images='+share_pic+'','newwindow');

});

//pengyou

$('#Share li a.share4').click(function(e) {

window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url='+share_url+'&pics='+share_pic+'&title='+share_title+'&site='+share_from+'','newwindow');

});

//tq

$('#Share li a.share5').click(function(e) {

window.open('http://share.v.t.qq.com/index.php?c=share&a=index&title='+share_title+'&site='+share_from+'&pic='+share_pic+'&url='+share_url+'','newwindow');

});

//kaixin

$('#Share li a.share6').click(function(e) {

window.open('http://www.kaixin001.com/repaste/bshare.php?rtitle='+share_title+'&rurl='+share_url+'&from=水墨寒个人官方网站','newwindow');

});

/*加入收藏*/

function addfavorite(){

var Url = "http://www.smohan.net";

var Title = "水墨寒个人官网";

if(document.all){

window.external.addFavorite(Url,Title);

}else if(window.sidebar){