DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery實現“掃碼閱讀”功能
jQuery實現“掃碼閱讀”功能
編輯:JQuery特效代碼     

今天看到一個用戶發了個話題,“PC端的URL在移動端上打開要一個個敲好麻煩,有什麼好的辦法?”。

確實現在已經是移動時代了,在移動設備上閱讀慢慢會成為主流,網站如果沒有便捷的方式讓用戶在移動設備閱讀的話還真有點落伍,於是想想就做個“掃碼閱讀”的功能吧。其實很簡單,就是將網址生成二維碼就行了。

無論用PHP生成,還是用JavaScript生成都是可以的,從代碼改動來說,用JavaScript會更省事些。所以這裡就用jQuery吧。正好網上有個 jquery.qrcode.js 的擴展,可以拿來用。使用起來也很簡單,比如這樣:

然後用微信、支付寶錢包什麼的掃一掃就可以在手機浏覽器打開了,很方便,感謝 jquery.qrcode.js 的作者。

生成QR碼的代碼如下:

代碼如下:
<div id="qrcode"></div>
<script src="http://www.xxx.net/librarys/application/views/veda/js/jquery-1.6.1.min.js" type="text/javascript">
<script src="http://www.xxx.net/librarys/application/views/veda/js/jquery.qrcode.min.js" type="text/javascript">
<script type="text/javascript">
jQuery.noConflict();
jQuery("#qrcode").qrcode({
  render: "canvas", //table方式
  width: 150, //寬度
  height:150, //高度
  text: 'http://www.xxx.net/' //任意內容
});
</script>

jquery.qrcode.js 其實是通過使用jQuery實現圖形渲染,畫圖,支持canvas(HTML5)和table兩種方式,默認使用canvas方式,效率最高,當然要浏覽器支持html5。直接調用如下:

代碼如下:
jQuery('#code').qrcode("http://www.xxx.net/");

如果浏覽器不支持 HTML5,或者你要配置圖片的尺寸,則可以采用這種方式:

代碼如下:
jQuery("#code").qrcode({
   render: "canvas", //canvas or table方式
   width: 150, //寬度
   height:150, //高度
   text: 'http://www.xxx.net/' //內容
});

現在博客每篇文章右側都有生成QR碼,可以掃一掃,在手機上閱讀了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved