jq 点击图片放大效果

效果图：

<style>
  .mindiv_{width:30%;float: left;text-align: left}
  .imgstyle{overflow: hidden;width: 220px;height: 230px;margin:6px 5px;border:1px solid #797979;padding:2px;}
  .text_center{text-align: center}
  .clear{clear: both;padding: 5px}
  /*自适应圆角投影*/
  .round_shade_box{width:1px; height:1px; font-size:0; display:none; _background:white; _border:1px solid #cccccc;}
  .round_shade_top{margin:0 12px 0 10px;  _background:white; zoom:1;}
  .round_shade_topleft{width:11px; height:10px;  _background:none; float:left; margin-left:-11px; position:relative;}
  .round_shade_topright{width:12px; height:10px;  _background:none; float:right; margin-right:-12px; position:relative;}
  .round_shade_centerleft{ _background:none;}
  .round_shade_centerright{ _background:none;}
  .round_shade_center{font-size:14px; margin:0 12px 0 10px; padding:10px; background:#fff;border: 10px solid #797979; letter-spacing:1px; line-height:1.5;}
  .round_shade_bottom{margin:0 12px 0 11px;  _background:#797979; zoom:1;}
  .round_shade_bottomleft{width:11px; height:10px; _background:none; float:left; margin-left:-11px; position:relative;}
  .round_shade_bottomright{width:12px; height:10px;  _background:none; float:right; margin-right:-12px; position:relative;}
  .round_shade_top:after,.round_shade_bottom:after,.zxx_zoom_box:after{display:block; content:"."; height:0; clear:both; overflow:hidden; visibility:hidden;}
  .round_box_close{padding:2px 5px; font-size:12px; color:#ffffff; text-decoration:none; border:1px solid #cccccc; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000000; opacity:0.8; filter:alpha(opacity=80); position:absolute; right:-5px; top:-5px;}
  .round_box_close:hover{opacity:0.95; filter:alpha(opacity=95);}
  /*自适应圆角投影结束*/
</style>
<script src="__ROOT__/statics/js/content_zoom.js{$js_debug}"></script>

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>

<foreach name="feedData['feedResource']" item="vo" >
  <a href="#pic_{$vo.id}"><img src="<php> echo C('CDN_HOSTNAME')</php>/{$vo.name}"  class="imgstyle" ></a>
  <!-- 要放大显示的div -->
  <div id="pic_{$vo.id}" style="display:none;"><img src="<php> echo C('CDN_HOSTNAME')</php>/{$vo.name}"  /></div>
</foreach>

<script type="text/javascript">
  $(document).ready(function() {
    $('div.small_pic a').fancyZoom({scaleImg: true, closeOnClick: true});
  });
</script>

content_zoom.js 代码如下

jQuery.fn.fancyZoom = function(options){
  
  var options   = options || {};
  var directory = options && options.directory ? options.directory : 'images';
  var zooming   = false;

  if ($('#zoom').length == 0) {
    var html = '<div class="round_shade_box" id="zoom"> \
               <div class="round_shade_top"> \
                  <span class="round_shade_topleft"> \</span> \
                  <span class="round_shade_topright"> \</span> \
               </div> \
               <div class="round_shade_centerleft"> \
                  <div class="round_shade_centerright"> \
                     <div class="round_shade_center" id="zoom_content"> \</div> \
                  </div> \
               </div> \
               <div class="round_shade_bottom"> \
                  <span class="round_shade_bottomleft"> \</span> \
                  <span class="round_shade_bottomright"> \</span> \
               </div> \
               <a href="#close" class="round_box_close" id="zoom_close">关闭</a> \
            </div>';
                
    $('body').append(html);
    
    $('html').click(function(e){if($(e.target).parents('#zoom:visible').length == 0) hide();});
    $(document).keyup(function(event){
        if (event.keyCode == 27 && $('#zoom:visible').length > 0) hide();
    });
    
    $('#zoom_close').click(hide);
  }
  
  var zoom          = $('#zoom');
  var zoom_close    = $('#zoom_close');
  var zoom_content  = $('#zoom_content');
  
  this.each(function(i) {
    $($(this).attr('href')).hide();
    $(this).click(show);
  });
  $('#zoom_close').click(hide);
  return this;
  
  function show(e) {
    if (zooming) return false;
      zooming         = true;
      var content_div = $($(this).attr('href'));
      var zoom_width  = options.width;
      var zoom_height = options.height;
      
      var width       = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
      var height      = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
      var x           = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
      var y           = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
      var window_size = {'width':width, 'height':height, 'x':x, 'y':y}
   
      var width              = (zoom_width || content_div.width()) + 40;
      var height             = (zoom_height || content_div.height()) + 40;
      var d                  = window_size;
      
      // ensure that newTop is at least 0 so it doesn't hide close button
      var newTop             = Math.max((d.height/2) - (height/2) + y, 0);
      var newLeft            = (d.width/2) - (width/2);
      var curTop             = e.pageY;
      var curLeft            = e.pageX;
      
      zoom_close.attr('curTop', curTop);
      zoom_close.attr('curLeft', curLeft);
      zoom_close.attr('scaleImg', options.scaleImg ? 'true' : 'false');
      
    $('#zoom').hide().css({
         position   : 'absolute',
         top             : curTop + 'px',
         left         : curLeft + 'px',
         width     : '1px',
         height    : '1px'
      });
    
    zoom_close.hide();
    
    if (options.closeOnClick) {
      $('#zoom').click(hide);
    }
    
   if (options.scaleImg) {
      zoom_content.html(content_div.html());
      $('#zoom_content img').css('width', '100%');
      } else {
        zoom_content.html('');
   }
    
    $('#zoom').animate({
      top     : newTop + 'px',
      left    : newLeft + 'px',
      opacity : "show",
      width   : width,
      height  : height
    }, 500, null, function() {
      if (options.scaleImg != true) {
          zoom_content.html(content_div.html());
      }
         zoom_close.show();
         zooming = false;
    })
    return false;
  }
  
  function hide() {
    if (zooming) return false;
      zooming         = true;
     $('#zoom').unbind('click');
      
      if (zoom_close.attr('scaleImg') != 'true') {
      zoom_content.html('');
      }
      zoom_close.hide();
      $('#zoom').animate({
        top     : zoom_close.attr('curTop') + 'px',
        left    : zoom_close.attr('curLeft') + 'px',
        opacity : "hide",
        width   : '1px',
        height  : '1px'
      }, 500, null, function() {
         
        if (zoom_close.attr('scaleImg') == 'true') {
            zoom_content.html('');
         }
            zooming = false;
      });
      return false;
     }
  
}