鼠标悬停显示二维码

当鼠标悬停则显示二维码图片

最近我在做机房主页时,需要用到一个功能,即当鼠标悬停在微信图标上时,在下方显示微信公众号的二维码。

原本我想做的高大上一点,加个漂亮的框、淡入淡出等效果,但是经过一次次调试效果却总让我不满意,干脆去掉所有效果,只保留功能。

代码如下

head部分加入

<!–此为我所用icon包的引链,FontAwesome,很全很好用–>

<link rel=stylesheet href=css/font-awesome/css/font-awesome.min.css />

<!–此为JS实现代码–>

<script type=”text/javascript”>

function showImg(){

document.getElementById(“wxImg”).style.display=’block’;

}

function hideImg(){

document.getElementById(“wxImg”).style.display=’none’;

}

</script>

body部分

<a href=”javascript:void(0)” onMouseOut=”hideImg()” onmouseover=”showImg()”><i class=”fa fa-weixin”></i> </a>
<div id=”wxImg” style=”display:none; right: 0px; top: 40px;back-ground:#f00;position:absolute; z-index:999;”><img class=”wx” src=”images/weixin.png”></div>

其中”fa fa-weixin”是FontAwesome的引用格式,这套图标真的很全,微信QQ支付宝微博人人等图标都有,用起来很方便。”weixin,png”是你的二维码图片。

此外再罗嗦几句,当你的QQ号在shang.qq.com开通推广功能后,在网页中插入一行代码就可以实现点击QQ图标自动弹出与目标QQ号的对话窗。代码如下

<a target=_blank href=http://wpa.qq.com/msgrd?v=3&uin=2363426316&site=qq&menu=yes><i class=fa fa-qq></i> 2363426316 </a>

没错我还是用的FA那套图标。

发表评论