淘先锋技术网

首页 1 2 3 4 5 6 7

jquery点击图片变大变小

jQuery 是一个非常流行的 JavaScript 库，其中包含了很多方便快捷的方法和函数，能够帮助我们实现一些常见的交互效果。今天，我们来学习如何利用 jQuery 实现一个点击图片变大变小的效果。


$(document).ready(function() {
  // 当页面加载完成后执行下面的代码
  $('.image').click(function() {
    // 当图片被点击时执行下面的代码
    $(this).toggleClass('enlarge');
  });
});

jquery点击图片变大变小

在上面的代码中，我们首先使用 `$(document).ready()` 方法来确保页面已经加载完成。然后，我们通过选择器 `$('.image')` 来选取所有类名为 `image` 的图片，并为其添加一个点击事件处理函数。

在事件处理函数中，我们调用了 `toggleClass()` 方法来切换图片的样式，使其从原来的尺寸变为更大的尺寸，并且在再次点击时恢复原样。

最后，我们将样式的定义写在 CSS 文件中：


.image {
  width: 200px;
  height: 200px;
  transition: all 0.3s ease-in-out;
}

.enlarge {
  width: 400px;
  height: 400px;
}

在上面的 CSS 代码中，我们为图片设置了一个初始的大小，并使用 `transition` 属性来定义动画效果。在 `.enlarge` 样式中，我们将图片的大小调整为更大的尺寸。

现在，我们已经完成了使用 jQuery 实现点击图片变大变小的效果！如果您需要了解更多 jQuery 的知识，可以去官方文档查看。