jQuery는 마우스가 큰 이미지 위로 미끄러질 때 큰 이미지를 미리 보는 효과를 실현합니다.-JS 튜토리얼-php.cn

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

小云云

풀어 주다： 2018-01-17 11:24:12

원래의

1953명이 탐색했습니다.

이 글에서는 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 style="border:1px solid gray;" src="&#39; + this.src + &#39;" />&#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 id="img1" width="120" height="60" src="logo-jq.gif">
<p id="large"></p>
鼠标滑过预览图片:<br>
<img width="120" height="60" src="logo-jq.gif"><br>

로그인 후 복사