jquery 点击图片放大效果基于thinkphp

最新推荐文章于 2023-01-10 09:36:51 发布

aiku_de_yu

最新推荐文章于 2023-01-10 09:36:51 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/aiku_de_yu/article/details/58595859

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery弹出层图片动画查看代码 - xw素材网</title>
<!--可无视-->

<!--弹出层样式-->
<style type="text/css">
/*自适应圆角投影*/
.round_shade_box{width:1px; height:1px; font-size:0; display:none; _background:#797979; _border:1px solid #cccccc;}
.round_shade_top{margin:0 12px 0 10px;  _background:#797979; zoom:1;}
.round_shade_topleft{width:11px; height:10px;  _background:#797979; float:left; margin-left:-11px; position:relative;}
.round_shade_topright{width:12px; height:10px;  _background:#797979; float:right; margin-right:-12px; position:relative;}
.round_shade_centerleft{ _background:#797979;}
.round_shade_centerright{ _background:#797979;}
.round_shade_center{font-size:14px; margin:0 12px 0 10px; padding:10px; background:white; 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:#797979; float:left; margin-left:-11px; position:relative;}
.round_shade_bottomright{width:12px; height:10px;  _background:#797979; 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 type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/content_zoom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('div.small_pic a').fancyZoom({scaleImg: true, closeOnClick: true});
   
});
</script>
</head>
<body>
    <div class="small_pic">
                        <a href="#pic_1">
                            <img src="images/mm1.jpg" />
                        </a>
                    </div>
                    <div class="small_pic">
                        <a href="#pic_two">
                            <img src="images/mm2.jpg" />
                        </a>
                    </div>
                    <div class="small_pic">
                        <a href="#pic_three">
                            <img src="images/mm3.jpg" />
                        </a>
                    </div>
                    <div class="small_pic">
                        <a href="#pic_four">
                            <img src="images/mm4.jpg" />
                        </a>
                    </div>
    <!-- 要放大显示的div -->
    <div id="pic_1" style="display:none;"><img src="images/mm1.jpg" /></div>
   <div id="#pic_441">dsfsdf</div>
    <div id="pic_two" style="display:none;"><img src="images/z2.jpg" /></div>
    <div id="pic_three" style="display:none;"><img src="images/z3.jpg" /></div>
    <div id="pic_four" style="display:none;"><img src="images/z4.jpg" /></div>

</body>
</html>


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;
     }
  
}

aiku_de_yu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 点击图片放大效果基于thinkphp

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">xmlns="http://www.w3.org/1999/xhtml">http-equiv="Content-Type" content="text/html; cha
复制链接

扫一扫