点击图片放大缩小功能

1.点击图片放大缩小的思路

图片部分：

<table>
  <div>
      <img style="width:62px;height:83px;display:block" src="${photourl}" οnclick="showMaxImg(this)">
  </div>
</table>

思路一：点击图片，然后在bootstrap里面的模态框（modal）放大，再点击放大后的图片，图片恢复正常。(使用bootstrap需要引入)

<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" data-toggle="modal" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg" style="display:inline-block;width:auto;">
       <div class="modal-content">
           <div id="imgshow"></div>
        </div>
      </div>
    </div>

第一个div里面必须要有modal，标明使用的是模态框。text-center:居中显示；aria-hidden：true；图片未点击时隐藏。

js部分：

function showMaxImg(obj){
   var src=$(obj).attr("src");
   $("#imgModal").find("#imgshow").html("<img src='"+src+"' class='carousel-inner img-responsive img-rounded' data-dismiss='modal'>");
$("#imgModal").modal('show');
}

获取原位置图片src，添加到模态框中图片的位置，然后显示隐藏的模态框。

思路二：使用hover（鼠标指针浮动在上面的元素）选择器，鼠标浮动在需要放大的图片上，图片放大，且相对靠右显示（我在实现的过程中遇到的问题是图片在表格靠近浏览器边缘的位置，放大之后让图片相对靠右显示）

我这里仅使用样式的方法进行修改：

img{
  cursor:pointer;//鼠标手型
  transition:all 0.6s ease-in-out;//过渡
}
table img:hover{
  display:block;
  transform：scale(5);//放大5倍
  margin-left:20%;//可根据实际情况调节，避免屏幕左边遮挡住照片的一部分
}

2.补充：

获取屏幕的分辨率：window.screen.width，

把图片固定在屏幕上：position:fixed; 或者给图片设定好具体的长宽高。

js给dom对象添加样式示例，$('body').css({'overflow':'hidden','padding-right':'17px'});  overflow:控制滚动条的。

modal事件，参考：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html  

display:block让a变成块级元素，可以跟div一样有高度、宽度、行高，否则宽度、高度是无效的。