鼠标悬停出现二维码动画放大，url转二维码

鼠标悬停出现二维码动画放大，url转二维码

效果

首先引入jq和qrcode.js

<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script> 
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> 

css

.qrcode-wrap {
    position: fixed;
    top: 20px;
    left: 50%;
    background-color: #fff;
    text-align: center;
    padding: 15px 18px;
    border-radius: 4px;
    cursor: pointer;
    transform-origin: top left;
    transition: transform .3s;
    transform: translateX(380px) scale(.2);
}
.qrcode-wrap .qrcode {
    width: 128px;
    height: 128px;
}
.qrcode-wrap:hover {
	transform:translateX(380px) scale(1)
}
.qrcode-wrap .title {
	font-size:14px;
	text-align:center;
	margin-bottom:10px;
}
.qrcode-wrap .tip {
	font-size:12px;
	color:#999daf;
	margin-top:10px;
}

html

<div class="qrcode-wrap">
	<div class="title">扫码预览</div>
	<div class="qrcode" id="qrcode"></div>
    <div class="tip">扫描二维码 分享给好友</div>
</div>

script

jQuery('#qrcode').qrcode({ width: 128, height: 128, text: window.location.href });