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 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 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
main.php
2006/12/09 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
浅谈Webpack打包优化技巧
2018/06/12 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
如何用Python徒手写线性回归
2021/01/25 Python
python装饰器代码深入讲解
2021/03/01 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
十佳教师事迹材料
2014/01/11 职场文书
中学生差生评语
2014/01/30 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
青年志愿者活动感想
2015/08/07 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android