基于jQuery实现点击小图片淡入淡出

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 08:14:38

　　基于jQuery实现点击小图片淡入淡出

基于jQuery实现点击小图片淡入淡出效果

理解需求

我们希望实现这样的效果：当用户点击一个小图片时，这个小图片会放大并淡入，同时其他小图片会淡出。

实现步骤

1. HTML结构

HTML

<div class="image-container">
  <img src="image1.jpg" alt="Image 1" class="small-image">
  <img src="image2.jpg" alt="Image 2" class="small-image">
  <img src="image3.jpg" alt="Image 3" class="small-image">
</div>

2. CSS样式

CSS

.image-container {
  text-align: center;
}

.small-image {
  width: 100px;
  height: 100px;
  cursor: pointer;
  opacity: 1; /* 初始透明度为1 */
  transition: opacity 0.5s ease-in-out; /* 淡入淡出过渡效果 */
}

3. jQuery代码

JavaScript

$(document).ready(function() {
  $('.small-image').click(function() {
    // 获取所有小图片
    const images = $('.small-image');

    // 将所有图片的透明度设置为0.5
    images.css('opacity', '0.5');

    // 将当前点击图片的透明度设置为1
    $(this).css('opacity', '1');
  });
});

代码解释

HTML结构: 创建一个容器div，并在其中放置多个小图片。
CSS样式: 设置小图片的尺寸、样式和过渡效果。
jQuery代码:
- 当点击一个小图片时：
  - 获取所有小图片元素。
  - 将所有图片的透明度设置为0.5（淡出）。
  - 将当前点击图片的透明度设置为1（淡入）。

完整示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>点击小图片淡入淡出</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /* CSS样式同上 */
  </style>
</head>
<body>
  <div class="image-container">
    </div>
  <script>
    // jQuery代码同上
  </script>
</body>
</html>