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實(shí)現(xiàn)簡(jiǎn)單QQ聊天框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單QQ聊天框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08Jquery 最近瀏覽過(guò)的商品的功能實(shí)現(xiàn)代碼
Jquery 最近瀏覽過(guò)的商品的功能實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-05-05jquery實(shí)現(xiàn)刷新隨機(jī)變化樣式特效(tag標(biāo)簽樣式)
本文主要介紹了tag標(biāo)簽隨機(jī)多彩變化的超鏈接樣式,使用JQ+DIV+CSS實(shí)現(xiàn)刷新隨機(jī)變化樣式特效。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02jQuery實(shí)現(xiàn)判斷滾動(dòng)條到底部
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷滾動(dòng)條到底部的相關(guān)資料,需要的朋友可以參考下2015-06-06javascript權(quán)威指南 學(xué)習(xí)筆記之null和undefined
JavaScript中的關(guān)鍵字null是一個(gè)特殊的值,它表示“無(wú)值”。null常常被看作對(duì)象類型的一個(gè)特殊值,即代表“無(wú)對(duì)象”的值。2011-09-09