jQuery是一种流行的JavaScript库，可以方便地在网页中添加各种动态效果。

在本篇文章中，我将介绍如何使用jQuery通过点击图片将其放大到全屏大小。这个效果在网页设计中经常使用，可以让用户更好地欣赏图片。

$('img').click(function() {
  // 获取图片原始大小
  var imgWidth = $(this).prop('naturalWidth');
  var imgHeight = $(this).prop('naturalHeight');

  // 计算全屏大小和屏幕中心位置
  var maxImgWidth = $(window).width() - 100;
  var maxImgHeight = $(window).height() - 100;
  var centerTop = ($(window).height() - imgHeight) / 2;
  var centerLeft = ($(window).width() - imgWidth) / 2;

  // 如果图片太大，缩小到屏幕大小
  if (imgWidth > maxImgWidth) {
    var ratio = maxImgWidth / imgWidth;
    imgWidth *= ratio;
    imgHeight *= ratio;
  }
  if (imgHeight > maxImgHeight) {
    var ratio = maxImgHeight / imgHeight;
    imgWidth *= ratio;
    imgHeight *= ratio;
  }

  // 创建全屏遮罩和图片
  var $overlay = $('
').addClass('overlay');
  var $img = $('').addClass('full-img')
                        .attr('src', $(this).attr('src'))
                        .css({
                          'width': imgWidth,
                          'height': imgHeight,
                          'top': centerTop,
                          'left': centerLeft
                        });

  // 点击遮罩或图片，关闭全屏图片
  $overlay.click(function() {
    $(this).remove();
    $img.remove();
  });
  $img.click(function() {
    $(this).remove();
    $overlay.remove();
  });

  // 添加遮罩和图片到网页
  $('body').append($overlay, $img);
});

代码中首先注册了一个图片的点击事件，通过jQuery的选择器选择所有图片（‘img’），然后在点击事件中执行以下操作：


  
获取图片原始大小，计算全屏大小和屏幕中心位置。
  
如果图片太大，缩小到屏幕大小。
  
创建全屏遮罩和图片，设置图片大小和位置。
  
添加遮罩和图片到网页。
  
为遮罩和图片添加点击事件，点击遮罩或图片时关闭全屏图片。


这样，我们就可以通过简单的代码实现点击图片放大到全屏的效果了。
				
				

								

					
上一篇 jquery点击图片变大变小
					
下一篇 jquery日期只显示年月