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 Ajax异步读取RSS文档具体实现
Dec 12 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
BootStrap selectpicker
Jun 20 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
原生JS实现留言板功能
Feb 08 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实现腾讯短网址生成api接口实例
2020/12/08 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
node.js超时timeout详解
2014/11/26 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
物业管理个人自我评价
2013/11/08 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
超市中秋节活动方案
2014/02/12 职场文书
高级编程求职信模板
2014/02/16 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
大学新生入学教育方案
2014/05/16 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android