JS+CSS实现微信二维码显示

严格来说,这只是使用JS来控制DIV显示/隐藏,配合微信二维码,就显得高大上和实用多了。

演示效果,把鼠标放在右上角的微信图标上。

JS+CSS显示二维码
JS+CSS显示二维码

1,添加JS代码在</head>前;

<script type="text/javascript">
function  showImg(){
document.getElementById("wxImg").style.display='block';
}
function hideImg(){
document.getElementById("wxImg").style.display='none';
}
</script>

wxImg是二维码图片的包围DIV。

2,HTML代码如下:

<div id="kalated-weixin">

	<a href="javascript:void(0)" onMouseOut="hideImg()"  onmouseover="showImg()">
		<img class="wx" src="http://www.czqiushi.com/wp-content/uploads/2015/10/wx.png">
	</a>

</div>
	<div id="wxImg" style="display:none; right: 120px; top: 50px;back-ground:#f00;position:absolute; z-index:999;">
		<img class="wx" src="http://www.czqiushi.com/wp-content/uploads/2015/10/weixin.jpg">
	</div>

3,接下来就是调整CSS来美化外观了。

“JS+CSS实现微信二维码显示”的一个回复

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注