How to use jquery to achieve image flipping effect-HTML Knowledge-php.cn

How to use jquery to achieve image flipping effect

藏色散人

Release： 2018-12-19 09:48:50

Original

7675 people have browsed it

jquery can use the jQuery attr() method to achieve image flipping effect. Then use the jquery attr() method to change the image source (that is, the src attribute of the tag ) to achieve the image flip effect.

How to use jquery to achieve image flipping effect

Now we will introduce to you the jquery method to achieve the image flipping effect with a simple code example.

The code example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery实现图片翻转效果示例</title>
    <style>
 .card{
            margin: 30px;
 }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
 $(function () {
            $("img").click(function(){
                // 改变图片的src属性
 $(this).attr("src", "./images/1.jpg");
 });
 });
 </script>
</head>
<body>
<div class="card">
    <img src=".images/2.jpg" alt="Poker Card">
</div>
</body>
</html>

Copy after login

Here we first define a picture (2.jpg), and then add a click event to this picture, which will be triggered when this picture is clickedattr() method, change the src attribute of the image, that is, replace it with another image (1.jpg).

The final image flip effect is as follows:

How to use jquery to achieve image flipping effect

attr() method can set or return the attribute value of the selected element . Depending on the parameters of the method, the way it works is also different.

Note: When this method is used to return attribute values, the value of the first matching element is returned.

When this method is used to set attribute values, one or more attribute/value pairs are set for the matching element.

This article is about the specific implementation method of jquery to achieve the image flipping effect. It is simple and easy to understand. I hope it will be helpful to friends in need!

The above is the detailed content of How to use jquery to achieve image flipping effect. For more information, please follow other related articles on the PHP Chinese website!