javascript实现类似百度分享功能的方法

2024-10-10 23:46:25

本文实例讲述了javascript实现类似百度分享功能的方法。分享给大家供大家参考。具体如下：

像腾讯，开心社区都提供这种分享接口的，做百度分享功能很简单的
一般网站要接入分享功能，大部分都用百度分享和addthis的代码，可是自己定制性太差，该分享功能样式都可以自己修改，简洁没过多js代码，大大提高网页加载速度。

运行效果如下图所示：

<!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程序设计有所帮助。

js 调用百度分享功能

效果图: 图(1)未展开图(2)展开效果代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="bdsharebuttonbox"> <a href="#" rel="ext
javascript实现百度翻译可折叠的分享按钮列表

自从开始学习前端后,平时看到浏览器上的一些出彩的控件都想自己实现一下O(∩_∩)O,不知大家有没有这个感觉.接下来就和大家分享一个,原控件来自百度翻译右下方,大家仔细找找应该能找到,如图所示: 感觉蛮有意思的,实现起来也不复杂,比较适合练手.好吧,废话不多说了,直接上代码吧. html代码: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset = 'utf-8'/>
利用JS延迟加载百度分享代码,提高网页速度

发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示.这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码代码如下: <div id=&quo
javascript实现类似百度分享功能的方法

本文实例讲述了javascript实现类似百度分享功能的方法.分享给大家供大家参考.具体如下: 像腾讯,开心社区都提供这种分享接口的,做百度分享功能很简单的一般网站要接入分享功能,大部分都用百度分享和addthis的代码,可是自己定制性太差,该分享功能样式都可以自己修改,简洁没过多js代码,大大提高网页加载速度. 运行效果如下图所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt
JavaScript实现网页对象拖放功能的方法

本文实例讲述了JavaScript实现网页对象拖放功能的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Drag</title> <meta http-equiv=
JavaScript实现自动消除按钮功能的方法

本文实例讲述了JavaScript实现自动消除按钮功能的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript自动消除前项显示的内容,在网页特定方位显示内容,第一个按钮可用,但第二个在第一个点击之后就不能用了,如果想让第二个按钮起作用,你需要对其进行功能消除,如本示例代码就实现这样一种功能. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
jsonp实现百度下拉框功能的方法分析

本文实例讲述了jsonp实现百度下拉框功能的方法.分享给大家供大家参考,具体如下: 思路就是获取用户输入,然后根据用户输入调用百度的一个接口jsonp实现跨域请求,然后将百度返回给的内容渲染数据到视图.需要注意的就是,发送请求的时候记得编码用户输入的内容 var obj=document.querySelector('#user-input'); var body=document.querySelectorAll('body')[0]; var ul=document.querySelecto
javascript实现类似java中getClass()得到对象类名的方法

本文实例讲述了javascript实现类似java中getClass()得到对象类名的方法.分享给大家供大家参考.具体如下: 在javascript中没有能够返回特定类型名的函数如一个对象 console.log(obj); 得到的是[object HtmlTableCellElement]如果想要一个函数能够返回HtmlTableCellElement js中默认没有这样的函数可以自己实现一个 var getObjectClass = function (obj) { if (obj &&a
JavaScript简单表格编辑功能实现方法

本文实例讲述了JavaScript简单表格编辑功能实现方法.分享给大家供大家参考.具体如下: <html> <head> <script type="text/javascript"> function getInnerHTML() { alert(document.getElementById("tr2").innerHTML); } function insCell() { var x=document.getElementB
纯Javascript实现ping功能的方法

本文实例讲述了纯Javascript实现ping功能的方法.分享给大家供大家参考.具体实现方法如下: function ping(ip) { var img = new Image(); var start = new Date().getTime(); var flag = false; var isCloseWifi = true; var hasFinish = false; img.onload = function() { if ( !hasFinish ) { flag = true
javascript省市级联功能实现方法实例详解

本文实例讲述了javascript省市级联功能实现方法.分享给大家供大家参考,具体如下: 初步实现方法: <html> <head> <script language="javascript"> function changecity(){ var province = document.form1.selprovince.value; var newoption1,newoption2; switch(province){ case "四
基于javascript实现仿百度输入框自动匹配功能

本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东,分享给大家供大家参考,具体内容如下 <HTML> <HEAD> <title>带输入匹配的文本框</title> <style> body,div { font-family:verd

javascript实现类似百度分享功能的方法

相关推荐

随机推荐