首页 / 脚本样式 / JavaScript / Jquery实现弹出层分享微博插件具备动画效果

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

作品包括以下功能：
1、弹出层
2、遮罩层
3、动画效果
4、CSS3

效果如下：
 
源码下载
代码片段（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）" 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="分享到人人网"><a href="javascript:void（0）" class="share3" ></a><span></span></li>";
share_html += "<li title="分享到朋友网"><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="分享到开心网"><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到各大社区"}）;
$（"#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）{
window.sidebar.addPanel（Title,Url,""）;
}else{
alert（"请使用Ctrl+D键导入书签！"）;
}
}