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


Posted in Javascript onApril 03, 2013

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

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

效果如下
Jquery实现弹出层分享微博插件具备动画效果 
源码下载
代码片段(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键导入书签!"); 
} 
}
Javascript 相关文章推荐
基于jquery的表头固定的若干方法
Jan 27 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 #Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 #Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 #Javascript
关于js注册事件的常用方法
Apr 03 #Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 #Javascript
JS模板实现方法
Apr 03 #Javascript
JS实现标签页效果(配合css)
Apr 03 #Javascript
You might like
上海无线电三厂简史修改版
2021/03/01 无线电
用PHP制作静态网站的模板框架
2006/10/09 PHP
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
简单实现jquery隔行变色
2017/11/09 jQuery
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
python使用tornado实现登录和登出
2018/07/28 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python里dict变成list实例方法
2019/06/26 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
法国在线药房:1001Pharmacies
2021/03/07 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
中学教师教学工作总结
2015/08/13 职场文书
通知怎么写?
2019/04/17 职场文书
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android