Методы масштабирования изображения и реализация jQuery с примерами кода - Fcodenotes

Масштаб изображения.
Масштаб изображения – это распространенная функция, позволяющая пользователям просматривать увеличенную версию изображения, когда они наводят на него курсор или нажимают на него. Вот пример того, как можно реализовать масштабирование изображения с помощью jQuery:

<!DOCTYPE html>
<html>
<head>
  <title>Image Zoom Example</title>
  <style>
    #image-container {
      position: relative;
      width: 200px;
      height: 200px;
      overflow: hidden;
    }
    #zoomed-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 400px;
      height: 400px;
      display: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#image-container').mouseenter(function() {
        $('#zoomed-image').fadeIn();
      }).mouseleave(function() {
        $('#zoomed-image').fadeOut();
      }).mousemove(function(e) {
        var containerOffset = $(this).offset();
        var mouseX = e.pageX - containerOffset.left;
        var mouseY = e.pageY - containerOffset.top;
        var zoomedImageWidth = $('#zoomed-image').width();
        var zoomedImageHeight = $('#zoomed-image').height();
        var imageContainerWidth = $(this).width();
        var imageContainerHeight = $(this).height();
        var zoomX = mouseX / imageContainerWidth * 100;
        var zoomY = mouseY / imageContainerHeight * 100;
        var zoomedX = zoomX / 100 * (zoomedImageWidth - imageContainerWidth);
        var zoomedY = zoomY / 100 * (zoomedImageHeight - imageContainerHeight);
        $('#zoomed-image').css({
          'left': -zoomedX,
          'top': -zoomedY
        });
      });
    });
  </script>
</head>
<body>
  <div id="image-container">
    <img src="small-image.jpg" alt="Small Image">
    <img id="zoomed-image" src="large-image.jpg" alt="Large Image">
  </div>
</body>
</html>

jQuery:
jQuery — это библиотека JavaScript, которая упрощает обход HTML-документов, обработку событий и анимацию. Он предоставляет простой в использовании API для управления элементами на веб-странице. Вот пример простого фрагмента кода jQuery, который скрывает элемент при нажатии кнопки:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#hide-button').click(function() {
        $('#target-element').hide();
      });
    });
  </script>
</head>
<body>
  <button id="hide-button">Hide Element</button>
  <div id="target-element">This element will be hidden when the button is clicked.</div>
</body>
</html>