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 forEach通用循环遍历方法
Oct 11 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
webpack 代码分离优化快速指北
May 18 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 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
用文本作数据处理
2006/10/09 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
有关Python的22个编程技巧
2018/08/29 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
python如何求100以内的素数
2020/05/27 Python
介绍一下#error预处理
2015/09/25 面试题
餐饮营销方案
2014/02/23 职场文书
森林病虫害防治方案
2014/06/02 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python