jquery를 사용하여 이미지 뒤집기 효과를 얻는 방법-HTML 지식-php.cn

jquery를 사용하여 이미지 뒤집기 효과를 얻는 방법

藏色散人

풀어 주다： 2018-12-19 09:48:50

원래의

7677명이 탐색했습니다.

jquery로 이미지 뒤집기 효과를 얻으려면 jQuery attr() 메서드를 사용할 수 있습니다. 그런 다음 jquery attr() 메서드를 사용하여 이미지 소스(즉, jquery를 사용하여 이미지 뒤집기 효과를 얻는 방법 태그의 src 속성)를 변경하여 이미지 뒤집기 효과를 얻습니다.

jquery를 사용하여 이미지 뒤집기 효과를 얻는 방법

이제 간단한 코드 예제를 바탕으로 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() 메서드가 트리거됩니다. picture.src 속성을 변경합니다. 즉, 다른 사진(1.jpg)을 바꿉니다.

최종 이미지 반전 효과는 다음과 같습니다.

jquery를 사용하여 이미지 뒤집기 효과를 얻는 방법