此jquery插件是一款非常实用的特效,是很多网站不可缺少的推广神兵利器,传统的一般都用百度、加网的分享插件,但样式外观都不怎么好看,用户体验效果差一点,此作品不但有分享功能,还具备了动画效果,提高了用户体验。由于用了css3,为了可以看到插件的最佳效果,建议大家使用谷歌、火狐等浏览器。。。
作品包括以下功能:
1、弹出层
2、遮罩层
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 : '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键导入书签!);
}
}