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 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
小程序转发探索示例
Feb 19 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
JS实现数组去重的11种方法总结
Apr 04 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&amp;java(一)
2006/10/09 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
python 捕获shell脚本的输出结果实例
2017/01/04 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
求职自荐信
2013/12/14 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
梅花魂教学反思
2014/04/25 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
体育教师求职信
2014/06/30 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
vue 自定义组件添加原生事件
2022/04/21 Vue.js
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技