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结合CSS操作打印样式的方法
Dec 24 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
webpack3之loader全解析
Oct 26 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
js实现简单的打印表格
Jan 15 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 获取一个月第一天与最后一天的代码
2010/05/16 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
node内置调试方法总结
2018/02/22 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
Django自定义用户认证示例详解
2018/03/14 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
入党申请自荐书范文
2014/02/11 职场文书
个人贷款承诺书
2014/03/28 职场文书
设备收款委托书范本
2014/10/02 职场文书
写给老师的感谢信
2015/01/20 职场文书
2016国培研修心得体会
2016/01/08 职场文书
安全生产协议书
2016/03/22 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
Golang的继承模拟实例
2021/06/30 Golang
pandas数值排序的实现实例
2021/07/25 Python
关于python类SortedList详解
2021/09/04 Python