【杂谈】如何用jquery完成图片翻转结果

2019-11-18杂谈搜奇网49°c

A⁺ A^-

jquery完成图片翻转结果，能够运用jQuery attr()要领。那末运用jquery attr()要领能够变动图象源（即标记的src属性<img>），以此来完成图片翻转结果。

下面我们就连系简朴的代码示例，给人人引见jquery完成图片翻转结果的要领。

代码示例以下：

<!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>

这里我们起首定义了一张图片（2.jpg），然后给这张图片增加一个点击事宜，当点击这张图片时就触发attr() 要领，转变图片的src属性，也就是替换另一张图片（1.jpg）。

终究完成图片翻转结果以下所示: