jquery动画3.创建一个带遮罩效果的图片走廊-前端开发

下面就来详细讲解“jquery动画3.创建一个带遮罩效果的图片走廊”的完整攻略。

下面就来详细讲解“jquery动画3.创建一个带遮罩效果的图片走廊”的完整攻略。

1.准备工作

首先，需要创建一个HTML页面，并引入jQuery库和所需的CSS和JS文件。创建一个空白的div作为图片走廊的容器，并在其中添加需要的图片。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>带遮罩效果的图片走廊</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <div class="container">
        <img src="images/01.jpg">
        <img src="images/02.jpg">
        <img src="images/03.jpg">
        <img src="images/04.jpg">
    </div>
</body>
</html>

2.添加遮罩层

在CSS文件中，添加遮罩层的样式。遮罩层使用绝对定位，覆盖在每个图片上面，并设置透明度为0。当鼠标悬浮在图片上时，遮罩层的透明度变为1，实现遮罩效果。

.container {
    position: relative;
}
.container img {
    width: 100%;
    height: 100%;
}
.container .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.container:hover .mask {
    opacity: 0.5;
}

3.实现图片切换动画

在JS文件中，使用jQuery来实现图片切换的动画效果。当鼠标点击图片时，将容器的整个宽度分为5个部分，每个部分宽度为容器宽度的1/5，并用CSS的transform属性来移动图片的位置，从而实现图片平滑的移动效果。

$(function() {
    // 获取图片数和容器宽度
    var len = $('.container img').length;
    var width = $('.container img').width();
    $('.container').css('width', width * len);

    // 点击图片
    $('.container img').on('click', function() {
        // 获取被点击图片的index
        var index = $('.container img').index(this);

        // 计算偏移量
        var offset = index * width / 5;

        // 移动图片
        $('.container').css({
            'transform': 'translateX(-' + offset + 'px)',
            '-webkit-transform': 'translateX(-' + offset + 'px)'
        });
    });
});

4.示例说明

示例1

在示例1中，图片走廊的容器以及样式已经准备好。需要在JS文件中添加图片切换动画的代码，实现点击图片时的平滑移动效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>带遮罩效果的图片走廊</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <div class="container">
        <img src="https://via.placeholder.com/400x300.png?text=Image+1">
        <img src="https://via.placeholder.com/400x300.png?text=Image+2">
        <img src="https://via.placeholder.com/400x300.png?text=Image+3">
        <img src="https://via.placeholder.com/400x300.png?text=Image+4">
        <img src="https://via.placeholder.com/400x300.png?text=Image+5">
    </div>
</body>
</html>

.container {
    position: relative;
    overflow: hidden;
}
.container img {
    width: 20%;
    height: 100%;
    float: left;
}
.container .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.container:hover .mask {
    opacity: 0.5;
}

$(function() {
    // 获取图片数和容器宽度
    var len = $('.container img').length;
    var width = $('.container img').width();
    $('.container').css('width', width * len);

    // 点击图片
    $('.container img').on('click', function() {
        // 获取被点击图片的index
        var index = $('.container img').index(this);

        // 计算偏移量
        var offset = index * width;

        // 移动图片
        $('.container').css({
            'transform': 'translateX(-' + offset + 'px)',
            '-webkit-transform': 'translateX(-' + offset + 'px)'
        });
    });
});

示例2

在示例2中，增加了遮罩层的样式，实现鼠标悬浮时的遮罩效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>带遮罩效果的图片走廊</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <div class="container">
        <img src="https://via.placeholder.com/400x300.png?text=Image+1">
        <img src="https://via.placeholder.com/400x300.png?text=Image+2">
        <img src="https://via.placeholder.com/400x300.png?text=Image+3">
        <img src="https://via.placeholder.com/400x300.png?text=Image+4">
        <img src="https://via.placeholder.com/400x300.png?text=Image+5">
        <div class="mask"></div>
    </div>
</body>
</html>

.container {
    position: relative;
    overflow: hidden;
}
.container img {
    width: 20%;
    height: 100%;
    float: left;
}
.container .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.container:hover .mask {
    opacity: 0.5;
}

$(function() {
    // 获取图片数和容器宽度
    var len = $('.container img').length;
    var width = $('.container img').width();
    $('.container').css('width', width * len);

    // 点击图片
    $('.container img').on('click', function() {
        // 获取被点击图片的index
        var index = $('.container img').index(this);

        // 计算偏移量
        var offset = index * width;

        // 移动图片
        $('.container').css({
            'transform': 'translateX(-' + offset + 'px)',
            '-webkit-transform': 'translateX(-' + offset + 'px)'
        });
    });
});

以上就是“jquery动画3.创建一个带遮罩效果的图片走廊”的完整攻略，希望对你有所帮助。