Jquery實作彈出層分享微博插件具備動畫效果_jquery

此Jquery插件是一款非常實用的特效，是很多網站不可缺少的推廣神兵利器，傳統的一般都用百度、加網的分享插件，但樣式外觀都不太好看，用戶體驗效果差一點，此作品不但有分享功能，也具備了動畫效果，提升了使用者體驗。由於用了CSS3，為了可以看到插件的最佳效果，建議大家使用Google、火狐等瀏覽器。 。 。

作品包含以下功能：
1、彈出層
2、遮罩層
3、動畫效果
4、CSS3

3、動畫效果4、CSS3
效果如下
： 

原始碼下載

程式碼片段(1)

複製程式碼 程式碼如下:

$(document).ready(function(e) {
var share_html = "";
//share_html = ''
share_html = '

'
share_html = '

'
share_html = '

'
share_html = '

';
share_html = '

';
share_html = '

'
share_html = ' ';
share_html = '

';
$('body').prepend(share_html);
$('.share').SmohanPopLayer({Shade : true,Event:'click',Content : '分享', Title : '分享Smohan到兩大社群'});
$('#分享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},'輕鬆InOutExpo');
});
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");
});
//新浪微博
$('#分享li a.share2').click(function(e) {
var param = {
url:share_url ,
appkey:'678438995 ',
title:share_title,
pic:share_pic,
ralateUid:'3061825921',
ralateUid:'3061825921',
()
}
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')
});
//朋友
$('#分享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
$('#分享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
$(>});
//kaixin
$( '#分享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鍵導入書籤！ ");
}
}