javascript实现类似百度分享功能的方法


Posted in Javascript onJuly 27, 2015

本文实例讲述了javascript实现类似百度分享功能的方法。分享给大家供大家参考。具体如下:

像腾讯,开心社区都提供这种分享接口的,做百度分享功能很简单的
一般网站要接入分享功能,大部分都用百度分享和addthis的代码,可是自己定制性太差,该分享功能样式都可以自己修改,简洁没过多js代码,大大提高网页加载速度。

运行效果如下图所示:

javascript实现类似百度分享功能的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网络分享代码分享</title>
<style type="text/css">
/**
 * 分享代码样式
 * by kily
 */
#ak_share  { padding:10px 0; font-size:12px; }
.ak_share  { height:1%; overflow:hidden; }
.ak_share dt { float:left; font-weight:bold; color:#A5A5A5; height:16px; line-height:16px; }
.ak_share dd { margin-right:10px; margin-left:0; height:16px; float:left; }
.ak_share a:hover { color:#ed7811; text-decoration:underline;}
.ak_share a { float:left; height:16px; line-height:16px; padding-left:18px; background:url(http://www.yem120.com/images/share.gif) left top no-repeat; color:#666; text-decoration:none; }
.ak_share .t_163_s  { background-position: 0 -16px; }
.ak_share .t_qq_s  { background-position: 0 -32px; }
.ak_share .qzone_s  { background-position: 0 -48px; }
.ak_share .douban_s { background-position: 0 -64px; }
</style>
</head>
<body>
<div id="ak_share">
  <dl class="ak_share">
    <dt>分享:</dt>
    <dd>
      <a class="t_sina_s" href="javascript:(function(){window.open('http://v.t.sina.com.cn/share/share.php?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&source=bookmark','_blank','width=450,height=400');})()" title="分享到新浪微博" rel="nofollow">新浪微博</a>
    </dd>
    <dd>
      <a class="t_163_s" href="javascript:(function(){window.open('http://t.163.com/article/user /checkLogin.do?link=http://news.163.com/&source=' + '&info='+encodeURIComponent(document.title)+' '+encodeURIComponent(location.href),'_blank','width=510,height=300');})()" title="分享到网易微博" rel="nofollow">网易微博</a> 
    </dd>
    <dd>
      <a class="t_qq_s" href="javascript:(function(){window.open('http://v.t.qq.com/share/share.php?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&source=bookmark','_blank','width=610,height=350');})()" title="分享到腾讯微博" rel="nofollow">腾讯微博</a>
    </dd>
    <dd>
      <a class="qzone_s" href="javascript:void(window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+encodeURIComponent(document.location.href)));" title="分享到QQ空间" rel="nofollow">QQ空间</a>
    </dd>
    <dd>
      <a class="douban_s" href="javascript:void(function(){var%20d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:' ',r='http://www.douban.com/recommend/?url='+e(d.location.href)+'&title='+e(d.title)+'&sel='+e(s)+'&v=1',x=function(){if(!window.open(r,'douban','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&r=1'};if(/firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()" title="推荐到豆瓣" rel="nofollow">豆瓣</a>
    </dd>
  </dl>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
Javascript闭包实例详解
Nov 29 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
js评分组件使用详解
Jun 06 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
纯js模拟div层弹性运动的方法
Jul 27 #Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 #Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 #Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 #Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 #Javascript
JavaScript判断IE版本型号
Jul 27 #Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 #Javascript
You might like
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
八大排序算法的Python实现
2021/01/28 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
python关于变量名的基础知识点
2020/03/03 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书