记录两个jquery插件，有关于图片放大的功能

1.图片点击之后整体放大

<div class="bigbox">
  <div class="imgbox">
    <img src="img/1.png" class="smallimg" alt="" />
  </div>
  <div class="imgbox">
    <img src="img/2.png" class="smallimg" alt="" />
  </div>
  <div class="imgbox">
    <img src="img/3.png" class="smallimg" alt="" />
  </div>
  <div class="imgbox">
    <img src="img/4.png" class="smallimg" alt="" />
  </div>
  <div class="imgbox">
    <img src="img/5.png" class="smallimg" alt="" />
  </div>
  <div class="imgbox">
    <img src="img/6.png" class="smallimg" alt="" />
  </div>
</div>
<img src="" alt="" class="bigimg" />
<div class="mask">
  <img src="img/close.png" alt="" />
</div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="zoom.js"></script>
      $(function() {
    /*
         smallimg   // 小图
         bigimg  //点击放大的图片
         mask   //黑色遮罩
         */
    var obj = new zoom('mask', 'bigimg', 'smallimg')
    obj.init()
  })
  
 可以自己去搜索zoom.js相关的配置项

2.图片的局部放大

<div class="wrap">
  <div class="left">
    <img src="tp.jpg" class="demo1" />
  </div>
  <div class="right">
    <img src="tp.jpg" class="demo2" />
  </div>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="blowup.js" type="text/javascript" charset="utf-8"></script>
 $(document).ready(function() {
  $('.demo1').blowup(
    {
      round: false
    },
    'demo2'
  )
  $('.demo2').blowup({}, 'demo1')
})   

自己搜索一下blowup.js的相关配置项 

连接： http://www.htmleaf.com/jQuery/Image-Effects/201603053185.html

顺便保存一个jquery插件库：www.jq22.com/