最新消息:为了本站的未来,希望大家能广为分享,另期待您投稿外贸人建站QQ交流群:201706683,验证请输入:卡拉科技

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

WordPress Tony 2460浏览 0评论

严格来说,这只是使用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实现微信二维码显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 这个好,正需要,来给支持,
    静思科技2年前 (2015-12-15)回复