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 相关文章推荐
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
图解javascript作用域链
May 27 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
详解vue3中组件的非兼容变更
Mar 03 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
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
php实现的农历算法实例
2015/08/11 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
载入进度条 效果
2006/07/08 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
vue2中filter()的实现代码
2017/07/09 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
js实现页面导航层级指示效果
2020/08/25 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python实现购物车购物小程序
2018/04/18 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python文件路径名的操作方法
2019/10/30 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
C#笔试题和英文面试题
2013/02/07 面试题
物业招聘计划书
2014/01/10 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
实习计划书范文
2015/01/16 职场文书
工作保证书
2015/01/17 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript