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 年会抽奖程序
Dec 22 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 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 读取文件乱码问题
2010/02/20 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
php中请求url的五种方法总结
2017/07/13 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python中创建二维数组
2018/10/17 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
值传递还是引用传递
2015/02/08 面试题
文史专业毕业生自荐信
2013/11/17 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
策划创业计划书
2014/02/06 职场文书
运动会入场解说词
2014/02/07 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
单位实习鉴定评语
2015/01/04 职场文书
小学教师教育随笔
2015/08/14 职场文书
外出听课学习心得体会
2016/01/15 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript