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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
JS实现日期加减的方法
Nov 29 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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重定向的3种方式
2013/03/07 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
javascript add event remove event
2008/04/07 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
Python pickle模块用法实例
2015/04/14 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
浅析python继承与多重继承
2018/09/13 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
篮球社团活动总结
2014/06/27 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
绿里奇迹观后感
2015/06/15 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android