js分享功能(微信,QQ,微博,空间,豆瓣等)
js分享功能(微信,QQ,微博,空间,豆瓣等)
日常编程中，我们可能会碰到项目中的分享功能，各大平台都有分享接口和文档说明，当然也有一些一键分享插件，例如：sosh，iShare.js等等
但有些同学不想引用插件，那么我整理了一些常用的分享至平台功能，以供参考。
html结构:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
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');}//分享到qqfunction 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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
.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版面需求～～～～
