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控制分页打印、打印分页示例
Feb 08 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
js友好的时间返回函数
Aug 24 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
Vue中的vue-resource示例详解
Nov 02 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
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
Python中__name__的使用实例
2015/04/14 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
秋季运动会活动方案
2014/02/05 职场文书
促销活动方案模板
2014/02/24 职场文书
初中教师业务学习材料
2014/05/12 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
大学生实训报告总结
2014/11/05 职场文书
先进集体申报材料
2014/12/25 职场文书
长城英文导游词
2015/01/30 职场文书
目标责任书格式范文
2015/05/11 职场文书
MySQL优化及索引解析
2022/03/17 MySQL
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android