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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
js获取页面description的方法
May 21 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
微信小程序实现页面左右滑动
Nov 16 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
用PHP4访问Oracle815
2006/10/09 PHP
php whois查询API制作方法
2011/06/23 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python爬虫之百度API调用方法
2017/06/11 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Python运行DLL文件的方法
2020/01/17 Python
python实现批量命名照片
2020/06/18 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
学院领导推荐信
2013/10/30 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
基于redis+lua进行限流的方法
2022/07/23 Redis