感觉吧,一个博客还是应该有分享的功能的,感觉挺重要的,所以就花了些时间给加上了。
不懂JS真心伤,感谢@陌小雨的帮助。
JS代码
// TBUI window.TBUI = window.TBUI || {} TBUI.bd = $('body') TBUI.shareimage = TBUI.shareimage || '' TBUI.click = 'click' $('.sitenav-on').on(TBUI.click, function(){ TBUI.bd.toggleClass('sitenav-active') }) $('.sitenav-mask').on(TBUI.click, function(){ TBUI.bd.removeClass('sitenav-active') }) $('.searchstart-on').on(TBUI.click, function(){ $(this).hide() $('.searchstart-off').show() TBUI.bd.addClass('searchform-active') $('.sinput').focus() }) $('.searchstart-off').on(TBUI.click, function(){ $(this).hide() $('.searchstart-on').show() TBUI.bd.removeClass('searchform-active') }) /* 分享 */ // SHARE IMAGE TBUI.shareimage = $("#imgshare").attr('src'); TBUI.bd.prepend('<div id="shareimage"><img src="'+%20TBUI.shareimage%20+'" style="display: none;"></div>') // SHARE var share = { url: encodeURIComponent(document.URL), pic: TBUI.shareimage, title: $('.s_title h2').text().length?$('.s_title h2').text():document.title, desc: ' 【'+$('h2.s_title').text() +'】 Mr.Wu博客,关注互联网安全,分享最新的黑客技术、黑客工具、开源漏洞、圈内新闻等!', summary: $('.item-descs p:first').text().length ? $('.item-descs p:first').text().substring(0,100): document.title } $('[etap="share"]').on(TBUI.click, function(){ var dom = $(this) var to = dom.data('share') var url = '' switch(to){ case 'qq': url = 'http://connect.qq.com/widget/shareqq/index.html?url='+share.url+'&title='+share.title+'&desc='+share.desc+'&summary='+share.summary+'&site=dedewp&pics='+share.pic break; case 'weibo': url = 'http://service.weibo.com/share/share.php?title='+share.desc+'&url='+share.url+'&source=bookmark&pic='+share.pic break; case 'douban': url = 'http://www.douban.com/share/service?image='+share.pic+'&href='+share.url+'&name='+share.title+'&text='+share.desc break; case 'qzone': url = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+share.url+'&title='+share.title+'&desc='+share.desc+'&pics='+share.pic+'&summary='+share.summary break; } if( !dom.attr('href') && !dom.attr('target') ){ dom.attr('href', url).attr('target', '_blank') } })
分享html代码
<div class="shares sharess" style="display: none;"> <a etap="share" data-share="qzone" class="share-qzone" title="分享到QQ空间"><i class="fa"></i></a> <a etap="share" data-share="weibo" class="share-tsina" title="分享到新浪微博"><i class="fa"></i></a> <a etap="share" data-share="qq" class="share-sqq" title="分享到QQ好友"><i class="fa"></i></a> <a etap="share" data-share="douban" class="share-douban" title="分享到豆瓣网"><i class="fa"></i></a> </div>
css代码
.shares a { position: relative; width: 32px; height: 32px; text-align: center; line-height: 32px; display: inline-block; margin-right: 10px; opacity: .8; border-radius: 2px; cursor: pointer } .shares a:hover { opacity: 1 } .shares a:hover .share-popover { visibility: visible; opacity: 1; margin-bottom: 0 } .shares a:before { height: 32px; width: 10px } .shares a:hover:before { -webkit-transition: right .5s; -moz-transition: right .5s; transition: right .5s; right: -70% } .shares a.share-tsina { background-color: #FF8D8D; ;background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -130px 0px; } .shares a.share-qzone { background-color: #FBC440; background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -98px 0px; } .shares a.share-sqq { background-color: #F68575; background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -194px 0px; } .shares a.share-renren { background-color: #95B4EC; background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -226px 0px; } .shares a.share-tqq { background-color: #5FB2D7; ;background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -162px 0px; } .shares a.share-douban { background-color: #67CE9B; background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -258px 0px; } .shares a.share-huaban { background-color: #DC5E5E } .shares i { color: #fff; font-size: 20px; font-weight: normal }
注意事项
以上为本博客最终代码,要实际应用的话需要对JS代码中几处样式进行相应修改。
需要给文章图片加上id="imgshare"
属性。
如果还需要其他平台的分享,可以对照代码进行相应添加。
效果图
本文作者为Mr.Wu,转载请注明,尊守博主劳动成果!
由于经常折腾代码,可能会导致个别文章内容显示错位或者别的 BUG 影响阅读; 如发现请在该文章下留言告知于我,thank you !
html代码 没有了 可以重新发一下吗?
@こ牵手已补全