SoFunction
Updated on 2025-03-04

jQuery picture special effects plug-in Revealing achieves stretching and amplification

Click on the picture and the picture is stretched and enlarged, and the effect is very good!

How to use:

1. Head area reference file,

2. Add <!-- code to the file Start --><!-- code End --> area code

3. The number of pictures can be increased or decreased freely, and you can add or delete <td></td>

4. If the image information is more and more space is needed, you can modify the number on line 36.

Core code:

$(document).ready(function(){
     
$('.photo_slider').each(function(){
   
  var $this = $(this).addClass('photo-area');
  var $img = $('img');
  var $info = $('.info_area');
     
  var opts = {};
   
  $(function(){
     = $();
     = $();
  });
   
   = $();
   = $();
   
  $ ({
    marginLeft: "-150px",
    marginTop: "-150px"
  });
   
  var $wrap = $('<div class="photo_slider_img">').append($img).prependTo($this);
 
  var $open = $('<a href="#" class="more_info">More Info &gt;</a>').appendTo($this);
   
  var $close = $('<a class="close">Close</a>').appendTo($info);
   
   = $();
   = $();
   
  $(function(){
    $({ 
      width: ,
      height: (+30),
      borderWidth: "10"
    }, 600 );
         
    $();
     
    $({ 
      width: ,
      height: 
    }, 600 );
 
    $(".info_area",$this).fadeIn();
     
    $({
      marginTop: "0px",
      marginLeft: "0px"
    }, 600 );
     
    return false;
  });
   
  $(function(){
    $({ 
      width: ,
      height: ,
      borderWidth: "1"
     }, 600 );
     
    $();
     
    $({ 
      width: ,
      height: 
       }, 600 );
     
      $({
        marginTop: "-150px",
        marginLeft: "-150px"
      }, 600 );
 
    $(".info_area",$this).fadeOut();
    return false;
  });
   
});
 
});

The above is the entire code of this article, I hope you like it.