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事件串连执行多个处理过程的方法
Mar 09 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
JS delegate与live浅析
Dec 21 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
Node.js API详解之 readline模块用法详解
May 22 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
PHP 实现链式操作
2021/03/09 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
js密码强度校验
2015/11/10 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Python遍历指定文件及文件夹的方法
2015/05/09 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python读取中文txt文本的方法
2018/04/12 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
自我鉴定 电子商务专业
2014/01/30 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
批评与自我批评总结
2014/10/17 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
运动会加油稿50字
2015/07/21 职场文书
小学班级口号大全
2015/12/25 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers