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跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
JS验证字符串功能
Feb 22 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Numpy之random函数使用学习
2019/01/29 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
2013年学期结束动员演讲稿
2014/01/07 职场文书
小学家长会邀请函
2014/01/23 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
通报表扬范文
2015/01/17 职场文书
保险内勤岗位职责
2015/04/13 职场文书
观后感开头
2015/06/19 职场文书