图片点击放大全屏显示

插件下载地址：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

转载于:https://www.cnblogs.com/fpcing/p/10797274.html