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 相关文章推荐
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
一些可能会用到的Node.js面试题
Jun 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 安全过滤函数代码
2011/05/07 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
react native与webview通信的示例代码
2017/09/25 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
django文档学习之applications使用详解
2018/01/29 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
用pycharm开发django项目示例代码
2019/06/13 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
网络技术支持面试题
2013/04/22 面试题
毕业生找工作的自我评价
2013/10/18 职场文书
干部下基层实施方案
2014/03/14 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android