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资料prototype 属性
Mar 13 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php注销代码(session注销)
2012/05/31 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
Python字符串三种格式化输出
2020/09/17 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
党支部鉴定意见
2015/06/02 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫