15日写过一篇给文章底部添加了微信二维码和weibo分享,最终因为js斗嘴导致需刷新一次页面才气点击生成二维码,这次批改了二维码的生成方法和显示方法,回收js+css方法让鼠标悬停显示二维码,添加QQ空间分享。
icon由于在icomoon上找不到符合的QQ空间分享icon,特改换为阿里巴巴矢量图标库的icon,开始不清楚icon如安在 a 标签内界说class挪用,厥后相识到详细利用要领才乐成改换图标库。阿里巴巴矢量图标库的icon利用说明这里我就不具体说了,有需要的伴侣们请自行搜索,这里只写如安在css中从头界说选择器,代码如下。
//用以下代码将原本的css界说替换掉
[class*="icon-"],[class^="icon-"]{
font-family:"iconfont"!important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing:
antialiased;
-webkit-text-stroke-width:0.2px;
-moz-osx-font-smoothing:grayscale;}
<a href="javascript:void(0);" onclick="window.open('?url='+encodeURIComponent(document.location.href));return false;" class="icon-qz" title="分享到QQ空间"></a>
weibo分享代码<a href="javascript:void((function(s,d,e){try{}catch(e){}var f='?',u=d.location.href,p=['url=',e(u),'&title=',e(d.title),'&appkey='].join('');function a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=620,height=450,left=',(s.width-620)/2,',top=',(s.height-450)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})(screen,document,encodeURIComponent));" class="icon-weibo" rel="nofollow" title="分享到新浪微博"></a>
二维码生成代码<img src=http://eveaz.com/"http:/qr.topscan.com/api.php?el=l&w=100&m=0&text=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/">
js+css实现图标悬停显示二维码function showImg(){
document.getElementById("wxImg").style.display='block';
}
function hideImg(){
document.getElementById("wxImg").style.display='none';
}
<div id="weixin">
<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()" rel="nofollow" title="分享到伴侣圈">
</a>
</div>
<div id="wxImg" style="display:none; right: 0px; top: -110px;back-ground:#f00;position:absolute; z-index:999;"><img src=http://eveaz.com/"http:/qr.topscan.com/api.php?el=l&w=100&m=0&text=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/">
</div>