jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】

以下是实现点击图片放大缩小预览功能的完整攻略：

以下是实现点击图片放大缩小预览功能的完整攻略：

步骤一：下载jQuery库文件

首先需要在网站上引入jQuery库文件，可以在官网（https://jquery.com/）进行下载。将下载好的jQuery文件放在项目的js目录下。

步骤二：编写HTML页面

紧接着，可以在HTML页面中编写图片预览模块的HTML代码。以下是一个简单的示例：

<div class="img-preview">
  <img src="images/example.jpg" class="preview-img" alt="图片预览">
  <div class="preview-mask"></div>
</div>

其中，.img-preview类是包含图片和遮罩层的容器，.preview-img类是需要放大的图片，.preview-mask类是遮罩层。默认情况下，.preview-mask是隐藏的。

步骤三：添加CSS样式

接下来，需要编写CSS样式来控制图片的预览效果。以下是一个基本的CSS代码示例：

.img-preview {
  position: relative;
  display: inline-block;
}
.preview-img {
  cursor: zoom-in;
}
.preview-mask {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: #000;
  opacity: 0.7;
  filter: alpha(opacity=70);
  z-index: 999;
}
.preview-img-enlarge {
  cursor: zoom-out;
  position: absolute;
  top: 50%;
  left: 50%;
  max-height: 80%;
  max-width: 80%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

这段CSS代码中，.img-preview设置了相对定位，并且显示方式为行内块元素。.preview-img设置了初始状态下鼠标的形态，使其看起来像是可以被点击的链接。.preview-mask是图片预览时的遮罩层，初始状态为隐藏的。.preview-img-enlarge类是放大后的图片效果。

步骤四：编写JavaScript代码

最后就是编写jQuery代码，实现图片预览缩放效果了。以下是一个基本的jQuery代码示例：

$('.preview-img').click(function() {
  var imgWidth = $('.preview-img')[0].naturalWidth;
  var imgHeight = $('.preview-img')[0].naturalHeight;
  var winWidth = $(window).width();
  var winHeight = $(window).height();

  $('.preview-mask').show();
  $('.preview-img').addClass('preview-img-enlarge');

  if (imgWidth > winWidth * 0.8) {
    $('.preview-img-enlarge').css('max-width', winWidth * 0.8);
  }
  if (imgHeight > winHeight * 0.8) {
    $('.preview-img-enlarge').css('max-height', winHeight * 0.8);
  }
});

$('.preview-img-enlarge').click(function() {
  $('.preview-mask').hide();
  $('.preview-img').removeClass('preview-img-enlarge');
});

这段jQuery代码中，首先是添加了一个点击事件，当用户点击图片时，会获取图片的宽、高，以及当前窗口的宽高。接着，遮罩层和放大图片的样式会被添加上去。然后，如果图片的宽或高超过了窗口的宽或高的80%，就会限制放大后的图片的最大宽高值。最后，添加了一个关闭预览图片的点击事件，当用户再次点击图片时，遮罩层和放大图片的样式会被移除。

示例一：使用苏格拉底的名言实现

以下是一个示例，使用苏格拉底的名言实现图片预览功能：

<div class="img-preview">
  <img src="images/socrates.jpg" class="preview-img" alt="苏格拉底">
  <div class="preview-mask"></div>
</div>

.img-preview {
  position: relative;
  display: inline-block;
  margin: 20px;
}

.preview-img {
  cursor: zoom-in;
  width: 300px;
}

.preview-mask {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: #000;
  opacity: 0.7;
  filter: alpha(opacity=70);
  width: 100%;
  height: 100%;
  z-index: 999;
}

.preview-img-enlarge {
  cursor: zoom-out;
  position: absolute;
  top: 50%;
  left: 50%;
  max-height: 80%;
  max-width: 80%;
  transform: translate(-50%, -50%);
}

$('.preview-img').click(function() {
  var imgWidth = $('.preview-img')[0].naturalWidth;
  var imgHeight = $('.preview-img')[0].naturalHeight;
  var winWidth = $(window).width();
  var winHeight = $(window).height();

  $('.preview-mask').show();
  $('.preview-img').addClass('preview-img-enlarge');

  if (imgWidth > winWidth * 0.8) {
    $('.preview-img-enlarge').css('max-width', winWidth * 0.8);
  }
  if (imgHeight > winHeight * 0.8) {
    $('.preview-img-enlarge').css('max-height', winHeight * 0.8);
  }
});

$('.preview-img-enlarge').click(function() {
  $('.preview-mask').hide();
  $('.preview-img').removeClass('preview-img-enlarge');
});

示例二：使用旅游图片实现

以下是另一个示例，使用旅游图片实现图片预览功能：

<div class="img-preview">
  <img src="images/travel.jpg" class="preview-img" alt="旅行">
  <div class="preview-mask"></div>
</div>

.img-preview {
  position: relative;
  display: inline-block;
  margin: 20px;
}

.preview-img {
  cursor: zoom-in;
  width: 300px;
}

.preview-mask {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: #000;
  opacity: 0.7;
  filter: alpha(opacity=70);
  width: 100%;
  height: 100%;
  z-index: 999;
}

.preview-img-enlarge {
  cursor: zoom-out;
  position: absolute;
  top: 50%;
  left: 50%;
  max-height: 80%;
  max-width: 80%;
  transform: translate(-50%, -50%);
}

$('.preview-img').click(function() {
  var imgWidth = $('.preview-img')[0].naturalWidth;
  var imgHeight = $('.preview-img')[0].naturalHeight;
  var winWidth = $(window).width();
  var winHeight = $(window).height();

  $('.preview-mask').show();
  $('.preview-img').addClass('preview-img-enlarge');

  if (imgWidth > winWidth * 0.8) {
    $('.preview-img-enlarge').css('max-width', winWidth * 0.8);
  }
  if (imgHeight > winHeight * 0.8) {
    $('.preview-img-enlarge').css('max-height', winHeight * 0.8);
  }
});

$('.preview-img-enlarge').click(function() {
  $('.preview-mask').hide();
  $('.preview-img').removeClass('preview-img-enlarge');
});

以上就是使用jQuery和CSS实现点击图片放大缩小预览功能的完整攻略，包括了HTML、CSS、JavaScript代码示例。