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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
js格式化时间的简单实例
Nov 27 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php验证码生成器
2017/05/24 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python先序遍历二叉树问题
2017/11/10 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
Python json转字典字符方法实例解析
2020/04/13 Python
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
财务内勤岗位职责
2014/04/17 职场文书
优秀学生评语大全
2014/04/25 职场文书
总经理岗位职责范本
2015/04/01 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python