qrcode box，一個小小的二維碼工具，通過調用它，可以在頁面中間彈出一個二維碼窗口，主要是面向移動設備的，對於PC端瀏覽器而言，百度分享和JiaThis已經做的很好了。
qrcode box有啥特點呢？
它能夠自動適應屏幕，並且不受移動設備橫屏、豎屏切換的干擾。
同時，無論是橫屏的pad設備，還是豎屏的phone設備，qrcode box均有良好表現。
但是，qrcode box並不是完全響應式的，它的尺寸不會跟隨屏幕可視區尺寸變化而變化，因為這貌似沒什么用(至少對於移動設備而言用處不大)。
小菜一再強調，qrcode box是面向移動設備的，所以小菜沒有過多關注瀏覽器兼容性，目前主流智能手機基本上是安卓和ios操作系統，幸運的是，他們的瀏覽器都是WebKit內核，兼容性沒得說。wp系統應該是ie內核吧，就暫時不考慮了。。。
qrcode box依賴：jquery、jquery.qrcode.js，css樣式參考JiaThis。
要想使用qrcode box，必須先引入：jquery、jquery.qrcode.js、qrcode.js、jquery.qrcode.box.js（注意順序，jquery必須放前邊），外加一個css：qrcode.box.css。
為啥需要這么多js呢。。。因為qrcode box不僅僅是一個box，它還得負責生成二維碼呢。。。
引入之后，這樣調用即可：
1 $("body").qrcodeBox({ 2 title: "分享到微信朋友圈", 3 des: "使用微信 “掃一掃” 即可分享網頁到朋友圈", 4 qrcodeText: "www.baidu.com", 5 offsetX: 0, 6 offsetY: 100 7 });
$("body")意思就是插入到html body中，不用管，這么寫就行了。
title是box的標題。
des是box的描述。
qrcodeText 是二維碼的內容。
offsetX , offsetY 是說水平方向和豎直方向的偏移量，box默認出現在屏幕正中央，萬一你不想呢？可接受正、負數，偏的方向不一樣，具體效果自己試。單位：px。
來兩張真機效果圖：
如果讀者實際測試時，發現box離奇的小，請檢查一下是否在html head中加上：
<meta name="viewport" id="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
有問題歡迎交流。