相信在工作中大家一定遇到過這樣的需求，就是點擊放大圖片，已達到展示的目的，再點擊會縮小。思路很多，今天先來學習兩個簡單易上手的方法方便工作中使用。

imgbox插件法

需要下載的同學可以收藏這個地址：

http://demo.lanrenzhijia.com/2014/pic0801/js/jquery.imgbox.pack.js

首先html和css佈局代碼是必須的，我們重點來看jq插件的調用方法:

<script>

$(function(){

$("#img01").imgbox();

$("#img02").imgbox({

'speedIn' : 0,

'speedOut' : 0,

'alignment' : 'center',

'overlayShow' : true,

'allowMultiple' : false

});

});

</script>

這裡img01和img02分別表示我們要做方法操作的兩張圖：

放大操作前

放大後效果如圖所示：

放大操作後

隱藏顯示法

思路：

1. 在需要展示的位置放置一個div，使其隱藏。

2. 點擊需要放大的圖片，顯示第一條說到的該區域，並把圖片地址傳遞給該div。

3. 點擊該區域，圖片隱藏。

代碼演示：

<!--需要放大的圖片 -->

<a href="javascript:;"><img class="img_display" src="images/case01.png"></a>

<a href="javascript:;"><img class="img_display" src="images/case02.png"></a>

<a href="javascript:;"><img class="img_display" src="images/case03.png"></a>

<!-- 展示區域div -->

<div class="big_box" style="display: block;">

<img id="imgShow" src="" alt="">

<img class="close_x" src="images/close_x.png">

</div>

<script>

$('.img_display').click(function(){

$(".big_box").css('display','block');

$("#imgShow").attr('src',$(this).get(0).src);

});

$("#imgShow").click(function(){

$(".big_box").css('display','none');

})

$(".close_xxx").click(function(){

$(".big_box").css('display','none');

})

</script>

第二種方法應用到了jq中的src以及this、get()的應用，不懂的小夥伴需要學習。

謝謝大家的關注，有不同方法與意見，可以在評論區討論哦。