jQuery實(shí)現(xiàn)“掃碼閱讀”功能
今天看到一個(gè)用戶發(fā)了個(gè)話題，“PC端的URL在移動(dòng)端上打開(kāi)要一個(gè)個(gè)敲好麻煩，有什么好的辦法？”。
確實(shí)現(xiàn)在已經(jīng)是移動(dòng)時(shí)代了，在移動(dòng)設(shè)備上閱讀慢慢會(huì)成為主流，網(wǎng)站如果沒(méi)有便捷的方式讓用戶在移動(dòng)設(shè)備閱讀的話還真有點(diǎn)落伍，于是想想就做個(gè)“掃碼閱讀”的功能吧。其實(shí)很簡(jiǎn)單，就是將網(wǎng)址生成二維碼就行了。
無(wú)論用PHP生成，還是用JavaScript生成都是可以的，從代碼改動(dòng)來(lái)說(shuō)，用JavaScript會(huì)更省事些。所以這里就用jQuery吧。正好網(wǎng)上有個(gè) jquery.qrcode.js 的擴(kuò)展，可以拿來(lái)用。使用起來(lái)也很簡(jiǎn)單，比如這樣：
然后用微信、支付寶錢包什么的掃一掃就可以在手機(jī)瀏覽器打開(kāi)了，很方便，感謝 jquery.qrcode.js 的作者。
生成QR碼的代碼如下：
<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 其實(shí)是通過(guò)使用jQuery實(shí)現(xiàn)圖形渲染，畫圖，支持canvas（HTML5）和table兩種方式，默認(rèn)使用canvas方式，效率最高，當(dāng)然要瀏覽器支持html5。直接調(diào)用如下：
如果瀏覽器不支持 HTML5，或者你要配置圖片的尺寸，則可以采用這種方式：
jQuery("#code").qrcode({
render: "canvas", //canvas or table方式
width: 150, //寬度
height:150, //高度
text: 'http://www.xxx.net/' //內(nèi)容
});
現(xiàn)在博客每篇文章右側(cè)都有生成QR碼，可以掃一掃，在手機(jī)上閱讀了。
相關(guān)文章
jQuery Validate驗(yàn)證框架詳解(推薦)
jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能,讓客戶端表單驗(yàn)證變得更簡(jiǎn)單,同時(shí)提供了大量的定制選項(xiàng),滿足應(yīng)用程序各種需求。有興趣的可以了解一下。2016-12-12
jQuery插件MixItUp實(shí)現(xiàn)動(dòng)畫過(guò)濾和排序
MixItUp過(guò)濾排序jQuery插件是一款鼠標(biāo)滑過(guò)圖片顯示描述的jQuery過(guò)濾排序插件。是一款輕量，但功能強(qiáng)大的 jQuery 插件，提供了對(duì)分類和有序內(nèi)容的美麗的動(dòng)畫過(guò)濾和排序功能。特別適合用于作品集網(wǎng)站，畫廊，圖片博客以及任何的分類或有序內(nèi)容。2015-04-04
這篇文章主要介紹了jquery增加和刪除元素的方法,涉及append、remove等方法的使用技巧,需要的朋友可以參考下2015-01-01
jquery獲取tr中控件值并操作tr實(shí)現(xiàn)思路
本教程將詳細(xì)介紹下jquery如何獲取tr中控件值并操作tr，代碼很精簡(jiǎn)，感興趣的各位可以參考下哈，希望可以幫助到你們2013-03-03
jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹
這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法
這篇文章主要介紹了jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法,涉及jQuery操作xml格式數(shù)據(jù)及表單驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
解決jquery實(shí)現(xiàn)的radio重新選中的問(wèn)題
這篇文章主要介紹了解決jquery實(shí)現(xiàn)的radio重新選中的問(wèn)題的方法和示例，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
js 實(shí)現(xiàn)一些跨瀏覽器的事件方法詳解及實(shí)例
這篇文章主要介紹了js 實(shí)現(xiàn)一些跨瀏覽器的事件方法詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery選擇器的基本功能、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
jQuery實(shí)現(xiàn)的簡(jiǎn)單無(wú)刷新評(píng)論功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單無(wú)刷新評(píng)論功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下2017-11-11