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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
让低版本浏览器支持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
php读取excel文件的简单实例
2013/08/26 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
JS控制表格隔行变色
2006/06/26 Javascript
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
python快速排序代码实例
2013/11/21 Python
Python判断Abundant Number的方法
2015/06/15 Python
python 删除非空文件夹的实例
2018/04/26 Python
Django 视图层(view)的使用
2018/11/09 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
python属于软件吗
2020/06/18 Python
物理研修随笔感言
2014/02/14 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
解除劳动合同证明书
2014/09/26 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
立春观后感
2015/06/18 职场文书
离职信范文
2015/06/23 职场文书