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;}
<style>
要饭二维码
洪哥写文章很苦逼,如果本文对您略有帮助,可以扫描下方二维码支持洪哥!金额随意,先行谢过!大家的支持是我前进的动力!

文章的版权
本文属于“洪哥笔记”原创文章,转载请注明来源地址:微信二维码鼠标放上去变大的前端代码:http://www.splaybow.com/post/weixin-qrcode-bianda-161258.html
如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:8771947!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D!
发布时间:2016/9/11 7:25:43 | 编辑:洪哥 | 分类:DHTML | 浏览: