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来美化外观了。

在线创建你的矢量二维码

二维码起源于日本,国外对二维码技术的研究始于20世纪80年代末,说明这个技术是早就存在的。只是由于智能手机的兴起,而带动了这一技术的广泛应用。对于普通的用户,知道如何使用手机扫描二维码就可以了,但是对于商家或外贸人,需要了解一下如何制作二维码和动手实践一下,邮件签名处、网站联系处和包装印刷上都可以有它用武之地。

二维码
二维码

这张图摘自百度百科,是二维码的原理图,不难看出,主要信息内容是包含在3这个点组成的内容,所以在二维码中间放上合适的LOGO并不会影响其传达的内容,注意放置LOGO后必须经过多次检测和调整,以免LOGO遮盖掉部分内容而导致信息不全。

对于二维码生成,推荐一个在线生成的网站(http://qrcode.cha-gang.com/),使用方法很简单。共5种类型选项,二维码名片对外贸人更实用吧,填写内容后点击生成,即可在下方下载各种文件格式二维码。再假以Photoshop编辑处理一下,赶紧动手做一个吧。

在页面右侧放置固定二维码图片

应邀找一段JS代码,为了实现放置微信二维码在页面右侧的功能。找了好久,终没有找到,今天突然发现完全可以用CSS来控制,为何要使用JS呢?做了一个简单的测试,以下为这段含DIV+CSS代码。

gd

<div style="width: 110px; height: 147px; position: fixed; top: 450px; right: 3px; display: block;">
<a href="http://kala-ted.com" target="_blank" style="display: block; width: 100%; height: 100%; background-image: url(kalated.png); background-position: -110px 0px;"></a>
</div>