jQuery는 마우스 스크롤을 통해 이미지를 확대 및 축소하는 방법을 구현합니다(데모 소스 코드 다운로드 포함)_jquery

이 기사의 예에서는 jQuery가 마우스 스크롤을 구현하여 이미지를 확대 및 축소하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

프로젝트 제작 과정에서 그런 필요성이 생겨서 하나 개발해서 녹음하게 되었습니다.

먼저 html 요소와 CSS 스타일을 정의해야 합니다.

<div style="position:relative;">
<asp:Image ID="myImg" runat="server" Width="670px" />
<span style="position:relative;display:none; background:wheat;border:1px solid gray;padding:3px;overflow:hidden;" id="NotificationMsg">滚动鼠标中键，可以放大或者缩小图片</span>
</div>

이 스타일에서는 이미지 스타일을 670px로 설정했는데, 이미지가 너무 크면 페이지 외부로 표시되는 것을 방지하기 위한 것입니다.

그런 다음 jquery 마우스 휠 플러그인을 사용하여 마우스 가운데 버튼의 스크롤 문제를 해결했습니다. 다음은 특정 jquery 작업 코드입니다.

<script type="text/javascript">
$(document).ready(function() {
  var count = 0;
  $("#ctl00_ContentPlaceHolder1_myImg").hover(function(e) {
      var left = e.originalEvent.x || e.originalEvent.layerX || 0; //get the left position
      var top = e.originalEvent.y || e.originalEvent.layerY || 0;  //get the top position
      $("#NotificationMsg").css({ 'position': 'absolute', 'left': left, 'top': top });
      $("#NotificationMsg").css("display", "block");
  }, function() {
    //alert('mouserout');
    $("#NotificationMsg").css("display", "none");
  }).mousewheel(function(event, delta, deltaX, deltaY) {
    count++;
    var height = $(this).attr("height");  //get initial height 
    var width = $(this).attr("width");   // get initial width
    var stepex = height / width;  //get the percentange of height / width
    var minHeight = 150;  // min height
    var tempStep = 50;  // evey step for scroll down or up
    $(this).removeAttr('style');
    if (delta == 1) { //up
      $(this).attr("height", height + count * tempStep);
      $(this).attr("width", width + count * tempStep / stepex);
    }
    else if (delta == -1) { //down
      if (height > minHeight)
        $(this).attr("height", height - count * tempStep);
      else
        $(this).attr("height", tempStep);
      if (width > minHeight / stepex)
        $(this).attr("width", width - count * tempStep / stepex);
      else
        $(this).attr("width", tempStep / stepex);
    }
    event.preventDefault();
    count = 0;
  });
});
</script>

이 코드에서 OriginalEvent 함수는 마우스 위치를 얻는 데 사용됩니다. IE9 및 Firefox에서 테스트하는 데 사용할 수 있습니다.

var left = e.originalEvent.x || e.originalEvent.layerX || 0; //get the left position
var top = e.originalEvent.y || e.originalEvent.layerY || 0;  //get the top position

그런 다음 코드에서 다음 작업을 수행하여 이미지의 초기 높이와 너비, 이미지 표시의 종횡비를 결정했습니다(목적은 동일한 크기 조정을 달성하는 것입니다).

var height = $(this).attr("height");  //get initial height 
var width = $(this).attr("width");   // get initial width
var stepex = height / width;  //get the percentange of height / width
var minHeight = 150;  // min height
var tempStep = 50;  // every step for scrolling down or up
$(this).removeAttr('style');

그 중 tempStep은 스크롤 시 축소 및 확대할 수 있는 비율 값을 구현하는 데 주로 사용됩니다. 이 작업을 수행한 후 주로 확대 또는 축소를 가능하게 하기 위해 이미지의 너비 스타일을 제거했습니다.

if (delta == 1) { //up
  $(this).attr("height", height + count * tempStep);
  $(this).attr("width", width + count * tempStep / stepex);
}
else if (delta == -1) { //down
  if (height > minHeight)
    $(this).attr("height", height - count * tempStep);
  else
    $(this).attr("height", tempStep);
  if (width > minHeight / stepex)
    $(this).attr("width", width - count * tempStep / stepex);
  else
    $(this).attr("width", tempStep / stepex);
}
event.preventDefault();
count = 0;

위 단락은 주로 위아래로 스크롤하여 판단한 다음 동일한 비율로 이미지를 확대하거나 축소하는 것입니다. event.preventDefault()는 이미지가 스크롤되는 동안 페이지가 스크롤되지 않도록 보장할 수 있습니다.

다음 플러그인이 첨부되어 있습니다:

여기를 클릭하세요이 사이트에서 다운로드하세요.

더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트에서 "JQuery 드래그 효과 및 기술 요약", "jQuery 확장 기술 요약"과 같은 특별 주제를 확인할 수 있습니다. , "JQuery 일반 클래식 특수 효과 요약", "jQuery 애니메이션 및 특수 효과 사용 요약", "jquery 선택기 사용 요약" 및 "jQuery 공통 플러그인 및 사용법 요약》

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.