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 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
php中批量替换文件名的实现代码
2011/07/20 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
列举Python中吸引人的一些特性
2015/04/09 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python自省及反射原理实例详解
2020/07/06 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
酒鬼酒广告词
2014/03/21 职场文书
书香校园建设方案
2014/05/02 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
给下属加薪申请报告
2015/05/15 职场文书
圣诞晚会主持词
2015/07/01 职场文书
导游词之山海关
2019/12/10 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
Java详细解析==和equals的区别
2022/04/07 Java/Android
MySQL新手入门进阶语句汇总
2022/09/23 MySQL