感觉吧,一个博客还是应该有分享的功能的,感觉挺重要的,所以就花了些时间给加上了。
不懂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+'&amp;url='+share.url+'&amp;source=bookmark&amp;pic='+share.pic
break;
case 'douban':
url = 'http://www.douban.com/share/service?image='+share.pic+'&amp;href='+share.url+'&amp;name='+share.title+'&amp;text='+share.desc
break;
case 'qzone':
url = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+share.url+'&amp;title='+share.title+'&amp;desc='+share.desc+'&amp;pics='+share.pic+'&amp;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"
属性。
如果还需要其他平台的分享,可以对照代码进行相应添加。