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 鼠标滚轮事件
Apr 09 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
vue二选一tab栏切换新做法实现
Jan 19 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
js实现登录验证码
2016/12/22 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
python list元素为tuple时的排序方法
2018/04/18 Python
python 常用的基础函数
2018/07/10 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
大学团支书的自我评价分享
2013/12/14 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
技术股份合作协议书
2014/10/05 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
Flask response响应的具体使用
2021/07/15 Python
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫