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 相关文章推荐
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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加入ftp扩展的解决方法
2013/02/07 PHP
javascript object array方法使用详解
2012/12/03 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Django 路由控制的实现代码
2018/11/08 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python爬取网页信息的示例
2020/09/24 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
上海天奕面试题笔试题
2015/04/19 面试题
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
行政助理的职责
2013/11/14 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
公共场所标语
2014/06/30 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
AngularJS实现多级下拉框
2022/03/25 Javascript