Jquery實(shí)現(xiàn)彈出層分享微博插件具備動(dòng)畫效果

更新時(shí)間：2013年04月03日 16:44:47 作者：

此Jquery插件是一款非常實(shí)用的特效，不但有分享功能，還具備了動(dòng)畫效果，提高了用戶體驗(yàn)，感興趣的朋友可以參考下哈

此Jquery插件是一款非常實(shí)用的特效，是很多網(wǎng)站不可缺少的推廣神兵利器，傳統(tǒng)的一般都用百度、加網(wǎng)的分享插件，但樣式外觀都不怎么好看，用戶體驗(yàn)效果差一點(diǎn)，此作品不但有分享功能，還具備了動(dòng)畫效果，提高了用戶體驗(yàn)。由于用了CSS3，為了可以看到插件的最佳效果，建議大家使用谷歌、火狐等瀏覽器。。。

作品包括以下功能：
1、彈出層
2、遮罩層
3、動(dòng)畫效果
4、CSS3

效果如下：

源碼下載
代碼片段(1)

復(fù)制代碼代碼如下:

 
$(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)" class="share1"></a><span></span></li>'; 
share_html += '<li title="分享到新浪微博"><a href="javascript:void(0)" class="share2"></a><span></span></li>'; 
share_html += '<li title="分享到人人網(wǎng)"><a href="javascript:void(0)" class="share3" ></a><span></span></li>'; 
share_html += '<li title="分享到朋友網(wǎng)"><a href="javascript:void(0)" class="share4"></a><span></span></li>'; 
share_html += '<li title="分享到騰訊微博"><a href="javascript:void(0)" class="share5"></a><span></span></li>'; 
share_html += '<li title="分享到開心網(wǎng)"><a href="javascript:void(0)" class="share6"></a><span></span></li>'; 
share_html += '</ul></div>'; 
$('body').prepend(share_html); 
$('.share').SmohanPopLayer({Shade : true,Event:'click',Content : 'Share', Title : '分享Smohan到各大社區(qū)'}); 
$('#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"; //默認(rèn)的分享圖片 
var share_from = encodeURIComponent("水墨寒個(gè)人官方網(wǎng)站"); //分享自（僅用于QQ空間和朋友網(wǎng)，新浪的只需更改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=水墨寒個(gè)人官方網(wǎng)站','newwindow'); 
}); 
}); 
/*加入收藏*/ 
function addfavorite(){ 
var Url = "http://www.smohan.net"; 
var Title = "水墨寒個(gè)人官網(wǎng)"; 
if(document.all){ 
window.external.addFavorite(Url,Title); 
}else if(window.sidebar){ 
window.sidebar.addPanel(Title,Url,""); 
}else{ 
alert("請(qǐng)使用Ctrl+D鍵導(dǎo)入書簽！"); 
} 
} 