參考文章1：http://m.oschina.net/blog/652758
引入js：
<script src="<%=Url.Content("~/style/js/jquery-1.11.3.min.js") %>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.qrcode.min.js") %>" type="text/javascript"></script>
<div id="qrcode"></div>
這是按照文章1中寫的：
1 $("#qrcode").qrcode({ //code_img是一個img標簽的id 2 render: "canvas", //設置渲染方式，有table和canvas，使用canvas方式渲染性能相對來說比較好 3 text: "www.baidu.com", //掃描二維碼后顯示的內容,可以直接填一個網址，掃描二維碼后自動跳向該鏈接 4 width: 80, //二維碼的寬度 5 height: 80, 6 background: "#ffffff", //二維碼的后景色 7 foreground: "#000000", //二維碼的前景色 8 src: $('#image').attr('src') //二維碼中間的圖片 9 });
出現下圖問題:
解決辦法：
問題解決方案原文：http://stackoverflow.com/questions/23216651/uncaught-referenceerror-qrcode-is-not-defined
解決步驟：
再引入js：
<script src="<%=Url.Content("~/Scripts/qrcode.min.js") %>" type="text/javascript"></script><!--此見https://github.com/davidshimjs/qrcodejs/blob/master/qrcode.min.js-->
js寫為：
1 var qrcode = new QRCode(document.getElementById("qrcode"), {
2 text: "http://www.baidu.com", 3 width: 128, 4 height: 128, 5 colorDark: "#000000", 6 colorLight: "#ffffff", 7 });
二維碼生成效果圖：
js下載地址：http://pan.baidu.com/s/1dFflPyL
鼠標懸停在a標簽上，出現二維碼
<a rel="nofollow" href="javascript:void(0)" id="qybwx">群英邦微信</a>
<div id="qrcode" style="display:none"></div>
1 <script src="<%=Url.Content("~/style/js/jquery-1.11.3.min.js") %>" type="text/javascript"></script> 2 <script src="<%=Url.Content("~/Scripts/jquery.qrcode.min.js") %>" type="text/javascript"></script> 3 <script src="<%=Url.Content("~/Scripts/qrcode.min.js") %>" type="text/javascript"></script> 4 <script type="text/javascript"> 5 $(document).ready(function () { 6 var qrcode = new QRCode(document.getElementById("qrcode"), { 7 text: "http://www.baidu.com", 8 width: 128, 9 height: 128, 10 colorDark: "#000000", 11 colorLight: "#ffffff", 12 });14 $('#qybwx').mouseover(function () { //綁定onmouseover 事件 15 $('#qrcode').css('display', 'block'); //顯示 17 $('#qrcode').css("position","relative"); 18 $('#qrcode').css("right",'-360px'); 19 $('#qrcode').css("top",'-160px'); 20 }); 21 $('#qybwx').mouseout(function () { //綁定onmouseout 事件 22 $('#qrcode').css('display', 'none'); //鼠標移出后設置為隱藏 23 }); 24 }); 25 </script>
鼠標懸停出現二維碼效果：
