jquery实现图片叠加效果代码

要实现图片叠加效果，可以使用jQuery来操作DOM元素，并通过CSS来控制图片的层叠顺序和位置。以下是一个简单的示例代码，展示了如何使用jQuery实现两张图片的叠加效果：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片叠加效果</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="image-container">
        <img src="image1.jpg" alt="Image 1" class="bottom-image">
        <img src="image2.png" alt="Image 2" class="top-image">
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.image-container {
    position: relative;
    width: 300px;
    height: 200px;
}

.bottom-image, .top-image {
    position: absolute;
    width: 100%;
    height: 100%;
}

.top-image {
    z-index: 2; /* 确保top-image在bottom-image之上 */
}

jQuery部分（script.js）

$(document).ready(function() {
    // 可以在这里添加一些动态效果或交互逻辑
    // 例如，点击图片切换位置
    $('.top-image').click(function() {
        $(this).toggleClass('bottom-image');
        $('.bottom-image').toggleClass('top-image');
    });
});

解释

HTML部分：创建了一个包含两张图片的容器<div class="image-container">，其中一张图片是底图（bottom-image），另一张是叠加在上面的图片（top-image）。
CSS部分：
- .image-container：设置为相对定位，以便其内部的绝对定位元素可以相对于它进行定位。
- .bottom-image和.top-image：都设置为绝对定位，覆盖整个容器。
- .top-image：通过设置z-index: 2，确保它在.bottom-image之上。