Home >Daily Programming >HTML Knowledge >How to use jquery to achieve image flipping effect

How to use jquery to achieve image flipping effect

藏色散人Original: 2018-12-15 16:53:297694browse

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 a1f02c36ba31691bcfe87b2722de723b) to achieve the image flip 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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to call multiple js functions in click eventNext article：How to call multiple js functions in click event

See more

How to use jquery to achieve image flipping effect

Related articles