jquery图片放大镜效果

介绍jquery图片放大镜效果需要的技术有HTML,CSS,jQuery，下面是详细的攻略：

介绍jquery图片放大镜效果需要的技术有HTML,CSS,jQuery，下面是详细的攻略：

一、HTML结构

首先我们需要一个图片容器，还有一个放大镜容器，下面是示例HTML代码：

<div class="zoom-box">
  <img class="small-img" src="path/to/small/image">
  <div class="magnify-box"></div>
</div>

二、CSS样式

接下来，我们需要为这两个容器设置样式。下面是示例CSS代码：

.zoom-box {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 400px;
}

.small-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.magnify-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, 0.2); /* 背景透明度为0.2 */
  border: 2px solid #fff; /* 边框为白色 */
  border-radius: 50%; /* 圆形边框 */
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.5); /* 阴影效果 */
  display: none;
  cursor: pointer; /* 设置光标为手型 */
}

三、jQuery效果

一旦我们有了HTML和CSS，我们就可以开始使用jQuery来实现放大效果了。首先，我们需要添加以下代码：

$('.zoom-box').mousemove(function(e) {
  // ...
});

$('.zoom-box').hover(function(){
  // ...
});

这段代码用来检测鼠标移动以及光标悬停在图片上。在mousemove事件中，我们要计算相对于小图的位置，并在放大容器上设置背景图。我们可以使用以下代码：

var smallImg = $(this).find('.small-img');
var magnifyBox = $(this).find('.magnify-box');
var offsetX = e.pageX - smallImg.offset().left;
var offsetY = e.pageY - smallImg.offset().top;
var zoomX = offsetX / smallImg.width() * magnifyBox.width();
var zoomY = offsetY / smallImg.height() * magnifyBox.height();
magnifyBox.css('background-position', '-' + zoomX + 'px -' + zoomY + 'px');

在hover事件中，我们要隐藏或显示放大容器。我们可以使用以下代码：

magnifyBox.fadeToggle();

这样就完成了放大镜效果的实现，下面是完整的jQuery代码：

$('.zoom-box').mousemove(function(e) {
  var smallImg = $(this).find('.small-img');
  var magnifyBox = $(this).find('.magnify-box');
  var offsetX = e.pageX - smallImg.offset().left;
  var offsetY = e.pageY - smallImg.offset().top;
  var zoomX = offsetX / smallImg.width() * magnifyBox.width();
  var zoomY = offsetY / smallImg.height() * magnifyBox.height();

  magnifyBox.css('background-position', '-' + zoomX + 'px -' + zoomY + 'px');
});

$('.zoom-box').hover(function(){
  var magnifyBox = $(this).find('.magnify-box');
  magnifyBox.fadeToggle();
});

四、示例说明

1. 简单效果

我们可以先实现一个简单的放大镜效果，下面是示例效果：

点击查看简单效果

实现这个效果的代码和前面的代码非常相似，只是需要调整一下放大容器的大小和位置。

1. 带缩略图效果

我们还可以实现一个更加完整的放大镜效果，这个效果带有一个缩略图。缩略图在页面上不显示，只有在放大镜效果显示后才会随着鼠标移动而实时更新。下面是示例效果：

点击查看带缩略图效果

实现这个效果需要增加一些HTML和CSS代码，下面是示例代码：

<div class="zoom-box">
  <img class="small-img" src="path/to/small/image">
  <div class="magnify-box"></div>
</div>

<div class="thumbnail-box">
  <img class="thumbnail-img" src="path/to/small/image">
</div>

.thumbnail-box {
  margin-top: 30px;
  text-align: center;
}

.thumbnail-img {
  display: inline-block;
  width: 80px;
  height: 80px;
  border: 2px solid #eee;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
}

这里我们添加了一个缩略图容器，在页面上不显示。缩略图容器中包含一个缩略图，我们需要根据缩略图的位置计算放大镜效果的位置和大小。

下面是完整的jQuery代码：

$('.thumbnail-img').mousemove(function(e){
  var bigImg = $('.big-img');
  var zoomX = (e.pageX - $(this).offset().left)/$(this).width()*bigImg.width();
  var zoomY = (e.pageY - $(this).offset().top)/$(this).height()*bigImg.height();

  bigImg.css('background-position', '-' + zoomX + 'px -' + zoomY + 'px');
});

$('.thumbnail-img').mouseenter(function(e) {
  $('.big-box').fadeToggle();
});

$('.thumbnail-img').mouseleave(function(e) {
  $('.big-box').fadeToggle();
});

$('.thumbnail-img').click(function(e) {
  var smallImg = $('.small-img');
  var bigImg = $('.big-img');
  var magnifyBox = $('.magnify-box');
  var thumbnailImg = $(this);
  var thumbnailBox = $('.thumbnail-box');
  var magnifyOffsetY = 20;

  smallImg.attr('src', thumbnailImg.attr('src'));
  bigImg.css('background-image', 'url("' + thumbnailImg.attr('src').replace('/small/', '/big/') + '")');

  var magnifyBoxWidth = thumbnailBox.width()*smallImg.width()/bigImg.width();
  var magnifyBoxHeight = thumbnailBox.height()*smallImg.height()/bigImg.height();
  magnifyBox.css('width', magnifyBoxWidth + 'px');
  magnifyBox.css('height', magnifyBoxHeight + 'px');

  magnifyBox.css('top', magnifyOffsetY + 'px');
  magnifyBox.css('left', (thumbnailImg.offset().left - thumbnailBox.offset().left - magnifyBox.width()/2) + 'px');

  var offsetX = e.pageX - thumbnailImg.offset().left;
  var offsetY = e.pageY - thumbnailImg.offset().top;
  var zoomX = Math.min(magnifyBoxWidth/2, Math.max(offsetX, magnifyBoxWidth/2));
  var zoomY = Math.min(magnifyBoxHeight/2, Math.max(offsetY + magnifyOffsetY, magnifyBoxHeight/2));
  magnifyBox.css('background-position', '-' + (zoomX - magnifyBoxWidth/2) + 'px -' + (zoomY - magnifyBoxHeight/2) + 'px');

  return false;
});

在这个示例中，我们使用了一些新的技术，例如：fadeToggle方法和attr方法。同时我们需要动态计算放大镜的大小和位置，保证这个效果可以适用于各种大小的图片和缩略图。

这就是完整的jquery图片放大镜效果的攻略了，希望能帮助到你。