圖片點擊放大全屏顯示

插件下載地址：http://www.jq22.com/jquery-info9291

插件下載完后，只需要兩個文件

 

 

 

在需要的頁面中引入兩個文件                                                 <linkhref="css/zoom.css"rel="stylesheet">     <scriptsrc="js/zoom.js"></script>

給每個需要點擊放大特效的圖片添加data-action屬性    <img src="img/blog_post_featured.png" data-action="zoom">

 

剛引入的時候出現電腦端可以放大顯示，手機端無法放大顯示的問題，然后自己從到到位過了一遍zoom.js，發現原因出在

    if (target.width >= ($(window).width() - Zoom.OFFSET)) return

　　這樣代碼出現在文件的35行，意思是，當前圖片的寬度 >= 當前窗口的寬度-顯示圖片的偏移量  的時候就返回，不去繼續往下執行。  也就是說，手機中當前放大前的圖片寬度為600px ,手機屏幕寬度為620px，圖片的偏移量為80px（圖片放大后距離屏幕左右80px）,所以問題就是出現了，如果繼續執行，手機是不是反而縮小了呢，變成620-80*2 = 460px了。但是如果還是需要放大的功能或者是直接顯示100%寬的話：

  function Zoom (img) {
    this._fullHeight      =
    this._fullWidth       =
    this._overlay         =
    this._targetImageWrap = null

    this._targetImage = img

    this._$body = $(document.body)
  }

  Zoom.OFFSET = 40
  Zoom._MAX_WIDTH = 2560
  Zoom._MAX_HEIGHT = 4096

　　在133行，直接修改Zoom.OFFSET = 0 就是100%了，10就是左右間距10px