js分享功能(微信,QQ,微博,空间,豆瓣等)

时间:2018-07-05 19:38:13   收藏:0   阅读:341

日常编程中,我们可能会碰到项目中的分享功能,各大平台都有分享接口和文档说明,当然也有一些一键分享插件,例如: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: 0;
  width: 128px;
  height: 128px;
  overflow: hidden;
  z-index: 9;
}
.bds_weixin:hover ~ .wechat-share{
  display: block;
}
.wechat-share img{
  width: 100%;
}

  

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

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!