js를 사용하여 작은 그림을 클릭하여 큰 그림을 표시하는 효과를 얻는 방법은 무엇입니까? (코드 예)

이 글에서는 작은 그림을 클릭하여 큰 그림을 표시하는 js, 즉 작은 그림을 클릭하여 큰 그림을 미리 보는 js 구현 방법을 주로 소개합니다. 이 기능을 구현할 때 필연적으로 이러한 요구 사항에 직면하게 됩니다. 웹사이트 구축과정. 특히 이미지가 많은 웹사이트의 경우 썸네일 표시가 매우 중요하므로 작은 이미지를 직접 클릭하여 큰 이미지를 미리 볼 수 있다면 더욱 효율적인 표시가 될 것입니다. 이미지를 클릭해서 확대하면 js 조작이 어렵지 않습니다. 아래에서는 구체적인 코드 데모를 보여 드리겠습니다.

js 작은 그림을 클릭하면 큰 그림이 나타납니다. 구체적인 코드 예는 다음과 같습니다.

<div>
    <img  class="dialog lazy"  src="/static/imghwm/default1.png"  data-src="1.png"    alt="js를 사용하여 작은 그림을 클릭하여 큰 그림을 표시하는 효과를 얻는 방법은 무엇입니까? (코드 예)" >
    <div id="dialog_large_image"></div>
</div>

<script type="text/javascript">
    $(function () {
        $("img.dialog").click(function() {
            var large_image = &#39;<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/139/183/406/1533975118964938.png?x-oss-process=image/resize,p_40"  class="lazy"  src= &#39; + $(this).attr("src") + &#39;</img alt="js를 사용하여 작은 그림을 클릭하여 큰 그림을 표시하는 효과를 얻는 방법은 무엇입니까? (코드 예)" >&#39;;
            $(&#39;#dialog_large_image&#39;).html($(large_image).animate({ height: &#39;50%&#39;, width: &#39;50%&#39; }, 500));
        });
    });
</script>

여기서 이해해야 할 지식 포인트는 jQuery 이벤트 - click() 메서드입니다.

요소를 클릭하면 클릭 이벤트가 발생합니다.

클릭은 마우스 포인터를 요소 위에 놓은 다음 마우스 왼쪽 버튼을 눌렀다가 떼면 발생합니다.

click() 메서드는 클릭 이벤트를 트리거하거나 클릭 이벤트가 발생할 때 실행할 함수를 지정합니다.

이 기사는 썸네일을 클릭하면 큰 이미지로 전환되는 js 관련 지식을 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.

【관련 추천글】

JS를 사용하여 버튼 클릭 후 자동으로 사진을 전환하는 간단한 메소드 구현

jquery를 사용하여 모바일 단말기에서 사진을 클릭하면 큰 화면으로 볼 수 있는 특수 효과 구현 picture_jquery

JS 작은 그림 연결 클릭 큰 그림 표시

JS를 사용하여 그림 클릭 주기 전환 실현(코드 포함)

위 내용은 js를 사용하여 작은 그림을 클릭하여 큰 그림을 표시하는 효과를 얻는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!