在文章底部添加QQ空间分享及批改微信二维码生成

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;}

QQ空间分享代码

<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),'&amp;title=',e(d.title),'&amp;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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/8814.html