推荐30个新鲜出炉的精美 jQuery 效果

下面我将为你详细讲解“推荐30个新鲜出炉的精美 jQuery 效果”的完整攻略。

前言

在前端开发中，jQuery 是一个非常常用的 JavaScript 库，它可以大大降低 js 开发的难度，提高开发效率。本攻略将为大家介绍 30 个新鲜出炉的、精美的 jQuery 效果，帮助大家更好地应用 jQuery 来实现一些复杂的页面效果。

效果展示

以下是两个示例，展示了本攻略中推荐的 jQuery 效果：

图片放大镜效果

这个效果展示了一个图片放大镜的效果。当鼠标悬停在图片上时，会出现一个放大镜，可以通过放大镜来查看图片的细节。

// HTML
<div class="zoom">
  <img src="image.jpg" alt="">
  <div class="zoom-lens"></div>
</div>

// CSS
.zoom {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
}
.zoom-lens {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.5);
  display: none;
  cursor: move;
}
.zoom-lens.active {
  display: block;
}

// JavaScript
$('.zoom').on('mousemove', function(e) {
  var lens = $(this).find('.zoom-lens'),
      img = $(this).find('img'),
      w = lens.width(),
      h = lens.height(),
      offset = $(this).offset(),
      x = e.pageX - offset.left - w / 2,
      y = e.pageY - offset.top - h / 2,
      maxX = $(this).width() - w,
      maxY = $(this).height() - h;

  if (x < 0) x = 0;
  if (y < 0) y = 0;
  if (x > maxX) x = maxX;
  if (y > maxY) y = maxY;

  lens.css({
    left: x,
    top: y
  });

  img.css({
    left: -x / $(this).width() * img.width(),
    top: -y / $(this).height() * img.height()
  });
});

$('.zoom').on('mouseenter', function(e) {
  $(this).find('.zoom-lens').addClass('active');
});

$('.zoom').on('mouseleave', function(e) {
  $(this).find('.zoom-lens').removeClass('active');
});

逐帧动画效果

这个效果展示了一个简单的逐帧动画效果，通过 jQuery 将多张图片进行组合，形成一个帧动画效果。

// HTML
<div class="animation"></div>

// CSS
.animation {
  background-image: url(frame-1.jpg),
                    url(frame-2.jpg),
                    url(frame-3.jpg),
                    url(frame-4.jpg),
                    url(frame-5.jpg),
                    url(frame-6.jpg),
                    url(frame-7.jpg),
                    url(frame-8.jpg);
  background-repeat: no-repeat;
  width: 200px;
  height: 200px;
  animation: play 1s steps(8) infinite;
}

@keyframes play {
  0% { background-position: 0px 0px; }
  100% { background-position: -1600px 0px; }
}

结语

以上是本攻略中的两个示例，希望能对大家有所帮助。如果你想了解更多关于 jQuery 的效果，欢迎到我们的网站上查看更多教程和攻略。