jQuery图片特效插件Revealing实现拉伸放大

本文给大家分享的是jQuery图片展示效果，使用的是jQuery Revealing插件，不点击的情况下，图片整齐排列成一行，当任意一个图片缩略图被点击的时候，该图片就放大显示，当点击关闭按钮时图片又重新还原了缩略图模式。

点击图片，图片拉伸放大显示，效果非常棒!

使用方法：

1、head区域引用文件 jquery.js，photorevealer.js，datouwang.css

2、在文件中加入区域代码

3、图片个数可以自由增减，增加或者删除即可

4、如果图片信息更多，需要更大的空间，可修改photorevealer.js中第36行的数字

核心代码：

1. $(document).ready(function(){ 
2.  
3. $('.photo_slider').each(function(){ 
4.  
5. var $this = $(this).addClass('photo-area'); 
6. var $img = $this.find('img'); 
7. var $info = $this.find('.info_area'); 
8.  
9. var opts = {}; 
10.  
11. $img.load(function(){ 
12. opts.imgw = $img.width(); 
13. opts.imgh = $img.height(); 
14. }); 
15.  
16. opts.orgw = $this.width(); 
17. opts.orgh = $this.height(); 
18.  
19. $img.css ({ 
20. marginLeft: "-150px", 
21. marginTop: "-150px" 
22. }); 
23.  
24. var $wrap = $('<div class="photo_slider_img">').append($img).prependTo($this); 
25.  
26. var $open = $('<a href="#" class="more_info">More Info ></a>').appendTo($this); 
27.  
28. var $close = $('<a class="close">Close</a>').appendTo($info); 
29.  
30. opts.wrapw = $wrap.width(); 
31. opts.wraph = $wrap.height(); 
32.  
33. $open.click(function(){ 
34. $this.animate({  
35. width: opts.imgw, 
36. height: (opts.imgh+30), 
37. borderWidth: "10" 
38. }, 600 ); 
39.  
40. $open.fadeOut(); 
41.  
42. $wrap.animate({  
43. width: opts.imgw, 
44. height: opts.imgh 
45. }, 600 ); 
46.  
47. $(".info_area",$this).fadeIn(); 
48.  
49. $img.animate({ 
50. marginTop: "0px", 
51. marginLeft: "0px" 
52. }, 600 ); 
53.  
54. return false; 
55. }); 
56.  
57. $close.click(function(){ 
58. $this.animate({  
59. width: opts.orgw, 
60. height: opts.orgh, 
61. borderWidth: "1" 
62. }, 600 ); 
63.  
64. $open.fadeIn(); 
65.  
66. $wrap.animate({  
67. width: opts.wrapw, 
68. height: opts.wraph 
69. }, 600 ); 
70.  
71. $img.animate({ 
72. marginTop: "-150px", 
73. marginLeft: "-150px" 
74. }, 600 ); 
75.  
76. $(".info_area",$this).fadeOut(); 
77. return false; 
78. }); 
79.  
80. }); 
81.  
82. }); 

以上所述就是本文的全部代码了，希望大家能够喜欢。