HTML, CSS and jQuery: Tips for achieving image shrinking effects-JS Tutorial-php.cn

HTML, CSS and jQuery: Tips for achieving image shrinking effects

WBOY

Release： 2023-10-27 19:34:05

Original

1541 people have browsed it

HTML, CSS and jQuery: Tips for achieving image shrinking effects

HTML, CSS and jQuery: Tips for implementing image shrinking effects

In modern web design, implementing some cool special effects can make web pages more attractive. Among them, image shrinking effects are often used to highlight important content on web pages. This article will introduce how to use HTML, CSS and jQuery to achieve image shrinking effects, and provide specific code examples.

Preparation
Before we start, we need to prepare some necessary files and code. First, create an HTML file named index.html. Then, create a folder named images to store picture files. In the index.html file, we will use CSS and jQuery to implement the image shrinking effect.
HTMLLayout
In the index.html file, we need to create a container to place images. You can use a div element to act as a container. The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>图片缩小特效</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="image-container">
        <img src="images/image.jpg" alt="图片">
    </div>
</body>
</html>

Copy after login

CSS Style
In order to achieve the image shrinking effect, we need to use CSS to control the size and animation effects of the image. In the style.css file, add the following code:

.image-container {
    width: 500px; /* 设置容器宽度 */
    height: 500px; /* 设置容器高度 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    position: relative; /* 为了让子元素绝对定位 */
}

.image-container img {
    width: 100%; /* 将图片宽度设置为容器宽度 */
    height: auto; /* 根据图片比例自适应高度 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 图片相对于容器顶部位置 */
    left: 0; /* 图片相对于容器左侧位置 */
    transition: transform 0.5s; /* 添加动画过渡效果 */
}

.image-container img:hover {
    transform: scale(0.7); /* 当鼠标悬停时，缩小图片至原大小的70% */
}

Copy after login

jQuery Action
In order to better control the image shrinking effect, we can use jQuery to handle mouse hover events. Create a file named script.js and add the following code:

$(document).ready(function() {
    $(".image-container img").hover(
        function() {
            $(this).addClass("hovered"); /* 添加hovered类 */
        },
        function() {
            $(this).removeClass("hovered"); /* 移除hovered类 */
        }
    );
});

Copy after login

CSS Animation Effect
In order to make the image shrinking effect smoother, we can add some to the .hovered class CSS animation effects. Modify the style.css file and add the following code:

.image-container img.hovered {
    transform: scale(0.7); /* 缩小图片至原大小的70% */
    transition: transform 0.5s; /* 添加过渡效果 */
}

Copy after login

Effect Demonstration
Save the prepared index.html, style.css and script.js files and run them in the browser Open the index.html file in , and you can see the effect of the image reduction effect taking effect.

Through the above steps, we used HTML, CSS and jQuery to achieve the image shrinking effect. When the mouse is hovered over the image, the image will animate to shrink to 70% of its original size. This special effect can not only highlight the important content of the web page, but also improve the user experience. I hope the code examples in this article will be helpful to you and allow you to easily implement various cool web page effects.

The above is the detailed content of HTML, CSS and jQuery: Tips for achieving image shrinking effects. For more information, please follow other related articles on the PHP Chinese website!