日常编程中,我们可能会碰到项目中的分享功能,各大平台都有分享接口和文档说明,当然也有一些一键分享插件,例如:soshiShare.js等等

但有些同学不想引用插件,那么我整理了一些常用的分享至平台功能,以供参考。

html结构:

<div class="share-list">
<ul class="share-container">
<li>
<a title="分享到微信" href="javascript:void(0)" class="bds_weixin">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_wechat.png" />
</a>
<div class="wechat-share">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_wechart_share.png" />
</div>
</li>
<li>
<a title="分享到新浪微博" href="javascript:void(0)" class="share_xlwb" onclick="shareToSinaWB(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_xlwb.png" />
</a>
</li>
<li>
<a title="分享到百度贴吧" href="javascript:void(0)" class="share_bdtb" onclick="shareToTieba(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_bdtb.png" />
</a>
</li>
<li>
<a title="分享到豆瓣" href="javascript:void(0)" class="share_db" onclick="shareToDouban(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_db.png" />
</a>
</li>
<li>
<a title="分享到人人网" href="javascript:void(0)" class="share_rrw" onclick="shareToRenren(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_renren.png" />
</a>
</li>
<li>
<a title="分享到QQ好友" href="javascript:void(0)" class="share_qq" onclick="shareToqq(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_qq.png" />
</a>
</li>
<li>
<a title="分享到QQ空间" href="javascript:void(0)" class="share_qzone" onclick="shareToQzone(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_zone.png" />
</a>
</li>
<li>
<a title="分享到开心网" href="javascript:void(0)" class="share_kx" onclick="shareToKaixin(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_kx.png" />
</a>
</li>
</ul>
</div>

  

注:分享至微信  您需要在css中将二维码隐藏,通过hover 微信图标再显示二维码

JS:

var _title,_source,_sourceUrl,_pic,_showcount,_desc,_summary,_site,
_url = 'http://www.newsucai.cn',
_pic = 'http://www.newsucai.cn/static/home/images/jpg/__header.jpg'; //分享至微信 css控制二维码隐藏和出现
//分享到新浪微博
function shareToSinaWB(event){
event.preventDefault();
var _shareUrl = 'http://v.t.sina.com.cn/share/share.php?title="123"'; //真实的appkey,必选参数
_shareUrl += '&url='+ encodeURIComponent(_url||document.location); //参数url设置分享的内容链接|默认当前页location,可选参数
_shareUrl += '&title=' + encodeURIComponent(_title||document.title); //参数title设置分享的标题|默认当前页标题,可选参数
_shareUrl += '&source=' + encodeURIComponent(_source||'');
_shareUrl += '&sourceUrl=' + encodeURIComponent(_sourceUrl||'');
_shareUrl += '&content=' + 'utf-8'; //参数content设置页面编码gb2312|utf-8,可选参数
_shareUrl += '&pic=' + encodeURIComponent(_pic||''); //参数pic设置图片链接|默认为空,可选参数
window.open(_shareUrl,'_blank');
}
//分享到QQ空间
function shareToQzone(event){
event.preventDefault();
var _shareUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?';
_shareUrl += 'url=' + encodeURIComponent(_url||document.location); //参数url设置分享的内容链接|默认当前页location
_shareUrl += '&showcount=' + _showcount||0; //参数showcount是否显示分享总数,显示:'1',不显示:'0',默认不显示
_shareUrl += '&desc=' + encodeURIComponent(_desc||'分享的描述'); //参数desc设置分享的描述,可选参数
_shareUrl += '&summary=' + encodeURIComponent(_summary||'分享摘要'); //参数summary设置分享摘要,可选参数
_shareUrl += '&title=' + encodeURIComponent(_title||document.title); //参数title设置分享标题,可选参数
_shareUrl += '&site=' + encodeURIComponent(_site||''); //参数site设置分享来源,可选参数
_shareUrl += '&pics=' + encodeURIComponent(_pic||''); //参数pics设置分享图片的路径,多张图片以"|"隔开,可选参数
window.open(_shareUrl,'_blank');
}
//分享到百度贴吧
function shareToTieba(event){
event.preventDefault();
var _shareUrl = 'http://tieba.baidu.com/f/commit/share/openShareApi?';
_shareUrl += 'title=' + encodeURIComponent(_title||document.title); //分享的标题
_shareUrl += '&url=' + encodeURIComponent(_url||document.location); //分享的链接
_shareUrl += '&pic=' + encodeURIComponent(_pic||''); //分享的图片
window.open(_shareUrl,'_blank');
}
//分享到豆瓣
function shareToDouban(event){
event.preventDefault();
var _shareUrl = 'http://shuo.douban.com/!service/share?';
_shareUrl += 'href=' + encodeURIComponent(_url||location.href); //分享的链接
_shareUrl += '&name=' + encodeURIComponent(_title||document.title); //分享的标题
_shareUrl += '&image=' + encodeURIComponent(_pic||''); //分享的图片
window.open(_shareUrl,'_blank');
}
//分享到人人网
function shareToRenren(event){
event.preventDefault();
var _shareUrl = 'http://widget.renren.com/dialog/share?';
_shareUrl += 'link=' + encodeURIComponent(_url||location.href); //分享的链接
_shareUrl += '&title=' + encodeURIComponent(_title||document.title); //分享的标题
window.open(_shareUrl,'_blank');
}
//分享到qq
function shareToqq(event){
event.preventDefault();
var _shareUrl = 'https://connect.qq.com/widget/shareqq/iframe_index.html?';
_shareUrl += 'url=' + encodeURIComponent(_url||location.href); //分享的链接
_shareUrl += '&title=' + encodeURIComponent(_title||document.title); //分享的标题
window.open(_shareUrl,'_blank');
}
//分享到开心网
function shareToKaixin(event){
event.preventDefault();
var _shareUrl = 'http://www.kaixin001.com/rest/records.php?';
_shareUrl += 'url=' + encodeURIComponent(_url||location.href); //分享的链接
_shareUrl += '&content=' + encodeURIComponent('分享的文字'); //需要分享的文字,当文字为空时,自动抓取分享网址的title
_shareUrl += '&pic=' + encodeURIComponent(_pic||''); //分享的图片,多个使用半角逗号分隔
_shareUrl += '&showcount=0'; //是否显示分享数,显示:'1',不显示:'0'
_shareUrl += '&style=11'; //显示的样式,必选参数
_shareUrl += '&aid=' + encodeURIComponent(_site||''); //显示分享来源
window.open(_shareUrl,'_blank');
}

  

css:

.share-container li{
  position: relative;
  float: left;
  width: 23px;
  height: 23px;
  margin-left: 5px;
  margin-top: 20px;
}
.share-container li a{
  display: inline-block;
  width: 100%;
  height: 23px;
}
.share-container li a img{
  width: 100%;
}
.wechat-share{
  display: none;
  position: absolute;
  top: 100%;
  left:;
  width: 128px;
  height: 128px;
  overflow: hidden;
  z-index:;
}
.bds_weixin:hover ~ .wechat-share{
  display: block;
}
.wechat-share img{
  width: 100%;
}

当然,您可以定义自己的样式来达到自己的UI版面需求~~~~

--------------------------------------转载------------------------------------------

js分享功能(微信,QQ,微博,空间,豆瓣等)的更多相关文章

  1. 微信JS分享功能--微信JS系列文章(二)

    概述 在上一篇文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的分享功能进行描述,供大家参考. 代码 $(document).ready(f ...

  2. 网页分享到微信、微博、QQ空间、百度贴吧等

    1.首先说明的是,pc端微信分享只能通过二维码来分享. 2.下面是js代码. //分享到新浪微博 function shareToSinaWB(event){ event.preventDefault ...

  3. 分享到微信、微博、QQ空间、QQ微博

    一:分享到微信 //分享到微信$("#weixin").bind("click", function () {    var p = {        url: ...

  4. javascript社交平台分享-新浪微博、QQ微博、QQ好友、QQ空间、人人网

    整理的五个社交平台的分享 <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  5. 如何在自己的代码中实现分享视频文件或者是图片文件到微信 QQ微博 新浪微博等!!!

    首先在文档第一句我先自嘲下 , 我是大傻逼, 弄了两天微信是视频分享,一直被说为啥跟系统的相册分享的不一样,尼玛!!! 这里来说正文,我这里不像多少太多,大家都是程序猿,具体的阔以看代码. 搞代码之前 ...

  6. 微信网页JS分享,微信二次分享无缩略图问题

    很多时候我们要在微信中分享h5网页,这个时候就得用微信的分享接口来自定义分享的地址.标题.描述.缩略图了. 分享到微信的时候遇到一个问题,就是第一次分享到微信里,是正确的,但是在微信打开分享的链接,再 ...

  7. js分享功能

    引用JiaThis的分享功能: 直接在想要放置分享功能的地方加上如下代码即可: <!-- JiaThis Button BEGIN --> <div class="jiat ...

  8. unity3d应用内分享(微信、微博等)的实现

    问题:如何在unity3d的游戏中实现分享功能,如图 思路: 1.分享功能的实现方式有多种,较方便快捷的一种是直接调用android的API来调出系统的分享界面 2.unity3d里面调用androi ...

  9. 集成ShareSDK,分享成功后QQ和空间回调不执行的可能原因

    AndroidMainifest.xml中的如箭头所示的id与assets下ShareSDK.xml中配置的QQ的AppId一定要相同.

随机推荐

  1. Java 8 Stream介绍及使用1

    (原) stream的内容比较多,先简单看一下它的说明: A sequence of elements supporting sequential and parallel aggregate * o ...

  2. pyqt5在textBrowser添加文本并自动滑动到底

    pyqt5在textBrowser添加文本并自动滑动到底 说明: 1.按下按钮pushButton,把单行文本框lineEdit里的内容循环不断的添加到多行文本展示框textBrowser.2.必须要 ...

  3. 分布式存储ceph——(4)ceph 添加/删除osd

    一.添加osd: 当前ceph集群中有如下osd,现在准备新添加osd:

  4. openstack 5大组件之间的关系和基本架构思维导图

    云计算是一种按使用量付费的模式,这种模式提供可用的/便捷的/按需的网络访问,进入可配置的计算资源共享池(资源包括网络/服务器/存储/应用软件和服务),这些资源能够被快速提供,只需投入很少的管理工作或与 ...

  5. SpringMVC 框架介绍以及环境搭建

    目录 前端设计模式介绍 分析前端设计模式 Spring MVC简单介绍 Spring和Spring MVC的关系 配置Spring MVC的环境并简单测试 前端设计模式介绍 前端设计模式其实和前端没啥 ...

  6. 关于微信小程序分享提示{"errMsg":"config:ok"}

    提示 {"errMsg":"config:ok"} {errMsg: "onMenuShareTimeline:ok"} {errMsg: ...

  7. ABP实践(1)-通过官方模板创建ASP.NET Core 2.x版本+vue.js单页面模板-启动运行项目

    1,打开ABP官网下载模板页面 2,根据下图选择对应的选项及输入项目名 注:上图验证码下方的选择框打钩表示下载最新稳定版,不打钩表示下载最新版本(有可能是预览版) 3,解压下载的压缩包 解压之后是个a ...

  8. Java数据库学习之模糊查询(like )

    Java数据库学习之模糊查询(like ): 第一种方式:直接在SQL语句中进行拼接,此时需要注意的是parm在SQL语句中需要用单引号拼接起来,注意前后单引号之间不能空格 String sql = ...

  9. [转帖]Oracle 补丁体系(PSR/PSU/CPU) 及 opatch 工具 介绍

    Oracle 补丁体系(PSR/PSU/CPU) 及 opatch 工具 介绍 原文:http://blog.csdn.net/tianlesoftware/article/details/58095 ...

  10. Centos 使用yum安装MongoDB 4.0

    1.配置MongoDB的yum源 创建yum源文件: #cd /etc/yum.repos.d #vim mongodb-org-4.0.repo 添加以下内容:(我们这里使用阿里云的源) [mngo ...