jquery 그림을 변경하려면 클릭하세요.-프런트엔드 Q&A-php.cn

jquery 그림을 변경하려면 클릭하세요.

PHPz

풀어 주다： 2023-05-25 10:22:37

원래의

526명이 탐색했습니다.

웹 개발에서는 페이지의 콘텐츠와 시각적 효과를 풍부하게 하기 위해 그림 요소를 사용해야 하는 경우가 많습니다. 때로는 사용자가 사진을 클릭할 때 일반 사진에서 강조 표시된 사진으로 변경하는 등 표시 효과를 변경해야 하는 경우도 있습니다. 그런 다음 이 대화형 효과를 얻으려면 jQuery 라이브러리를 사용해야 합니다.

jQuery는 HTML 문서 탐색 및 작업, 이벤트 처리, 애니메이션 효과 및 기타 작업을 단순화하는 일반적으로 사용되는 JavaScript 라이브러리입니다. 구문은 간결하고 사용하기 쉬우며 선택할 수 있는 플러그인도 많습니다. 아래에서는 jQuery를 사용하여 클릭에 따라 이미지 효과가 변경되는 예제를 구현해 보겠습니다.

먼저 HTML 문서에 조작하려는 이미지 요소를 삽입해야 합니다. 여기서는 파란색 자동차를 예로 들어 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>jQueryjquery 그림을 변경하려면 클릭하세요.</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>

로그인 후 복사

그 중 CSS 스타일을 사용하여 이미지의 크기, 배경 이미지, 커서 스타일을 정의합니다. 동시에 나중에 JavaScript에서 호출할 수 있도록 이 요소의 ID를 "car"로 지정합니다.

다음으로 이미지의 클릭 이벤트를 구현하는 JavaScript 함수를 작성해야 합니다. 이 경우 jQuery 라이브러리에서 제공하는 기능을 사용하여 그림 요소의 스타일을 수정할 수 있습니다.

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

로그인 후 복사

이 함수에서는 먼저 jQuery의 "$" 기호를 통해 ID가 "car"인 이미지 요소를 가져온 다음 여기에 클릭 이벤트 수신 함수를 바인딩합니다. 사용자가 자동차 사진을 클릭하면 이 듣기 기능이 실행됩니다.

이 리스닝 함수에서는 jQuery 라이브러리에서 제공하는 "css" 함수를 사용하여 이미지 요소의 스타일을 수정합니다. 첫 번째 매개변수는 수정할 스타일 속성의 이름이고 두 번째 매개변수는 속성 값입니다. 설정됩니다. 이 예에서는 배경 이미지의 URL을 강조 표시된 자동차 사진인 "blue-car-highlight.jpg"로 변경합니다.

초기 상태에서는 사진에 하이라이트 효과가 없으므로 이 사진 요소 외부에 "blue-car-highlight.jpg"(강조 표시된 자동차 사진)와 같은 다른 사진을 추가해야 한다는 점에 주목할 필요가 있습니다. 클릭 후 표시 효과로.

최종 효과는 아래 그림에 나와 있습니다.

jquery 그림을 변경하려면 클릭하세요.