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 相关文章推荐
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Python 私有函数的实例详解
2017/09/11 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
执行Python程序时模块报错问题
2020/03/26 Python
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
中间件的定义
2016/08/09 面试题
求职者应聘的自我评价
2013/10/16 职场文书
工程材料采购方案
2014/05/18 职场文书
教师年终个人总结
2015/02/11 职场文书