jQuery實現(xiàn)“掃碼閱讀”功能
更新時間：2015年01月21日 16:54:27 投稿：hebedich
這篇文章主要介紹了jQuery實現(xiàn)“掃碼閱讀”功能方法的相關(guān)資料,需要的朋友可以參考下
今天看到一個用戶發(fā)了個話題，“PC端的URL在移動端上打開要一個個敲好麻煩，有什么好的辦法？”。
確實現(xiàn)在已經(jīng)是移動時代了，在移動設(shè)備上閱讀慢慢會成為主流，網(wǎng)站如果沒有便捷的方式讓用戶在移動設(shè)備閱讀的話還真有點落伍，于是想想就做個“掃碼閱讀”的功能吧。其實很簡單，就是將網(wǎng)址生成二維碼就行了。
無論用PHP生成，還是用JavaScript生成都是可以的，從代碼改動來說，用JavaScript會更省事些。所以這里就用jQuery吧。正好網(wǎng)上有個 jquery.qrcode.js 的擴展，可以拿來用。使用起來也很簡單，比如這樣：
然后用微信、支付寶錢包什么的掃一掃就可以在手機瀏覽器打開了，很方便，感謝 jquery.qrcode.js 的作者。
生成QR碼的代碼如下：
復(fù)制代碼 代碼如下:
<div id="qrcode"></div>
<script src=" <script src=" <script type="text/javascript">
jQuery.noConflict();
jQuery("#qrcode").qrcode({
render: "canvas", //table方式
width: 150, //寬度
height:150, //高度
text: 'http://www.xxx.net/' //任意內(nèi)容
});
</script>
jquery.qrcode.js 其實是通過使用jQuery實現(xiàn)圖形渲染，畫圖，支持canvas（HTML5）和table兩種方式，默認使用canvas方式，效率最高，當然要瀏覽器支持html5。直接調(diào)用如下：
復(fù)制代碼 代碼如下:
如果瀏覽器不支持 HTML5，或者你要配置圖片的尺寸，則可以采用這種方式：
復(fù)制代碼 代碼如下:
jQuery("#code").qrcode({
render: "canvas", //canvas or table方式
width: 150, //寬度
height:150, //高度
text: 'http://www.xxx.net/' //內(nèi)容
});
現(xiàn)在博客每篇文章右側(cè)都有生成QR碼，可以掃一掃，在手機上閱讀了。
相關(guān)文章
這篇文章主要介紹了JQuery球隊選擇實現(xiàn)方法,實例分析了jQuery中鼠標事件與頁面元素相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
下面小編就為大家?guī)硪黄猨Query中事件與動畫的總結(jié)分享。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
自己寫的 ToolTip提示插件,書寫過程很認真的,希望大家支持我，給我點評論,感興趣的朋友可以了解下哦，希望本文對你有所幫助2013-01-01
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單QQ聊天框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
Jquery 最近瀏覽過的商品的功能實現(xiàn)代碼，需要的朋友可以參考下。2010-05-05
如果你不知道什么是jQuery autocomplete插件，請看圖。你可以測試一下本站的搜索。當然也可以百度一下。2009-04-04
jquery實現(xiàn)刷新隨機變化樣式特效（tag標簽樣式）
本文主要介紹了tag標簽隨機多彩變化的超鏈接樣式，使用JQ+DIV+CSS實現(xiàn)刷新隨機變化樣式特效。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery實現(xiàn)判斷滾動條到底部的相關(guān)資料,需要的朋友可以參考下2015-06-06
在結(jié)果集后鏈式調(diào)用remove()方法即可刪除也可以通過向remove傳參的形式來過濾選擇結(jié)果再執(zhí)行remove操作2014-05-05
javascript權(quán)威指南 學(xué)習(xí)筆記之null和undefined
JavaScript中的關(guān)鍵字null是一個特殊的值，它表示“無值”。null常常被看作對象類型的一個特殊值，即代表“無對象”的值。2011-09-09