jquery click to change picture-Front-end Q&A-php.cn

jquery click to change picture

PHPz

Release： 2023-05-25 10:22:37

Original

579 people have browsed it

In web development, it is often necessary to use picture elements to enrich the content and visual effects of the page. Sometimes, we need to change the display effect when the user clicks on the picture, such as changing from a normal picture to a highlighted picture. Then at this time, you need to use the jQuery library to achieve this interactive effect.

jQuery is a commonly used JavaScript library that simplifies HTML document traversal and operations, event processing, animation effects and other operations. Its syntax is concise and easy to use, and it also has a large number of plug-ins to choose from. Below, we will use jQuery to implement an example of changing image effects based on clicks.

First, we need to insert the image element we want to operate into the HTML document. Here we take a blue car as an example.

<!DOCTYPE html>
<html>
<head>
    <title>jQueryjquery click to change picture</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #car {
            width: 300px;
            height: 200px;
            background-image: url("blue-car.jpg");
            background-size: cover;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="car"></div>
</body>
</html>

Copy after login

Among them, we use CSS styles to define the size, background image and cursor style of the image. At the same time, we specify the id of this element as "car" so that it can be called later in JavaScript.

Next, we need to write a JavaScript function to implement the click event of the image. In this event, we can use the functions provided by the jQuery library to modify the style of the picture element.

$(function() {
    $('#car').click(function() {
        $(this).css('background-image', 'url("blue-car-highlight.jpg")');
    });
});

Copy after login

In this function, we first obtain the image element with the ID "car" through jQuery's "$" symbol, and then bind a click event listening function to it. When the user clicks on the picture of the car, this listening function will be executed.

In this listening function, we modify the style of the image element through the "css" function provided by the jQuery library. The first parameter is the name of the style attribute to be modified, and the second parameter is the attribute value. In this example, we change the URL of the background image to "blue-car-highlight.jpg", which is a picture of a highlighted car.

It is worth noting that since the picture does not have a highlighting effect in the initial state, we need to add another picture outside this picture element, such as "blue-car-highlight.jpg" (the highlighted picture of the car) as shown after clicking.

The final effect is shown in the picture below.

jquery click to change picture

So far, we have successfully implemented the function of changing the picture effect with one click. Through the above examples, we not only learned the basic syntax of the jQuery library, but also learned how to use the jQuery library to implement an interactive Web page.

The above is the detailed content of jquery click to change picture. For more information, please follow other related articles on the PHP Chinese website!