jQuery는 마우스가 큰 이미지 위로 미끄러질 때 큰 이미지를 미리 보는 효과를 실현합니다.

이 글에서는 jQuery 마우스 이벤트 응답과 페이지 요소 속성의 동적 조작을 포함하여 미리보기 이미지 위에 마우스를 대는 효과를 구현하는 jQuery의 방법을 주로 소개합니다. 이를 참조하는 것이 모든 사람에게 도움이 되기를 바랍니다.

이 문서의 예에서는 마우스를 롤오버할 때 jQuery가 그림의 대규모 미리 보기 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

요구 사항은 다음과 같습니다. 마우스를 이동한 사진에서는 큰 사진의 미리보기가 동시에 표시되며, 마우스를 움직이면 큰 사진의 미리보기가 표시됩니다. 다른 곳으로 이동하면 숨겨집니다.

원리는 실제로 매우 간단합니다. 먼저 p가 필요하고 jQuery 메서드를 통해 태그를 동적으로 추가하고 이 의 스타일(너비, 높이)을 변경합니다. 표시되어야 하는 이미지입니다.

js 코드:

$(function(){
  var ei = $("#large");
  ei.hide();
  $("#img1, img").mousemove(function(e){
    ei.css({top:e.pageY,left:e.pageX}).html(&#39;<img  src="/static/imghwm/default1.png"  data-src="&#39; + this.src + &#39;"  class="lazy"    style="max-width:90%"  / alt="jQuery는 마우스가 큰 이미지 위로 미끄러질 때 큰 이미지를 미리 보는 효과를 실현합니다." >&#39;).show();
  }).mouseout( function(){
    ei.hide();
  })
  $("#f1").change(function(){
    $("#img1").attr("src","file:///"+$("#f1").val());
  })
});

HTML 부분:

上传预览图片:<br>
<input id="f1" name="f1" type="file" /><br>
<img  src="/static/imghwm/default1.png"  data-src="logo-jq.gif"  class="lazy"  id="img1"    style="max-width:90%"  style="max-width:90%"  alt="jQuery는 마우스가 큰 이미지 위로 미끄러질 때 큰 이미지를 미리 보는 효과를 실현합니다." >
<p id="large"></p>
鼠标滑过预览图片:<br>
<img  src="/static/imghwm/default1.png"  data-src="logo-jq.gif"  class="lazy"     style="max-width:90%"  style="max-width:90%"  alt="jQuery는 마우스가 큰 이미지 위로 미끄러질 때 큰 이미지를 미리 보는 효과를 실현합니다." ><br>

관련 권장 사항:

새로 고침되지 않는 업로드를 달성하는 JavaScript 미리 보기 이미지 기능

php 비디오 미리 보기 이미지를 얻는 간단한 방법

JS 구현 전기 비즈니스 터치 확대 효과

위 내용은 jQuery는 마우스가 큰 이미지 위로 미끄러질 때 큰 이미지를 미리 보는 효과를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!