微信二维码鼠标放上去变大的前端代码

HTML部分，主要用一个div来放置一个小的二维码和一个大的二维码。

<div class="qrcode">

<img src="/images/qrcode.jpg" />

<div class="big-qrcode">

<img src="/images/qrcode.jpg" />

</div>

</div>

JS部分，主要用于控制鼠标移动上去和鼠标离开后控制二维码大小两张图片的显示。

<script>

$(function(){

$(".qrcode").hover(function (){$('.big-qrcode').css('display','block')});

$(".qrcode").mouseleave(function (){$('.big-qrcode').css('display','none')});

})

</script>

二维码图片的几个样式：

<style>

.qrcode{ position:absolute; top:20px; right:300px; width:80px;}

.qrcode img { width:80px; height:80px;}

.big-qrcode{display: none; position:relative; top: -100px; left:-40px; z-index:100000;}

.big-qrcode img { width:150px; height:150px;}