基于jQuery实现圆形图片横向轮播特

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 08:09:41

　　基于jQuery实现圆形图片横向轮播特

基于jQuery实现图片缩放平移预览特效

理解需求

实现图片缩放平移预览功能，即用户可以在一个特定的区域内，通过鼠标滚轮缩放图片，并通过鼠标拖拽来移动图片，从而查看图片的局部细节。

实现思路

HTML结构:
- 创建一个容器div，作为图片展示的区域。
- 在这个容器内放置一个img标签，作为要展示的图片。
CSS样式:
- 设置容器div的样式，包括宽高、溢出隐藏等。
- 设置img标签的样式，初始状态下宽度和高度与容器相同。
jQuery交互:
- 监听鼠标滚轮事件，通过改变img标签的scale来实现缩放。
- 监听鼠标按下、移动和松开事件，实现拖拽功能。
- 计算鼠标在图片上的相对位置，并根据鼠标移动的距离来调整图片的位置。

代码示例

HTML


<!DOCTYPE html>

<html>

<head>

  <title>图片缩放平移预览</title>

  <style>

    #container {

      width: 500px;

      height: 300px;

      overflow: hidden;

    }

    #image {

      width: 100%;

      height: 100%;

      cursor: move;

    }

  </style>

</head>

<body>

  <div id="container">

    <img id="image" src="your_image.jpg" alt="">

  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script>

    $(document).ready(function() {

      const container = $('#container');

      con   st image = $('#image');



      let isDragging = false;

      let startX, startY;

      let scale = 1;



      container.on('wheel', (event) => {

        event.preventDefault();

        scale += event.deltaY * -0.01;

        scale = Math.min(Math.max(.125, scale), 4);

        image.css('transform', `scale(${scale})`);

      });



      container.on('mousedown', (event) => {

        isDragging = true;

        startX = event.clientX - container.offset().left;

        startY = event.clientY - container.offset().top;

      });



      $(document).on('mousemove', (event) => {

        if (isDragging) {

          const x = event.clientX - container.offset().left;

          const y = event.clientY - container.offset().top;

          const deltaX = x - startX;

          const deltaY = y - startY;

          startX = x;

          startY = y;

          image.css('transform', `scale(${scale}) translate(${deltaX}px, ${deltaY}px)`);

        }

      });



      $(document).on('mouseup', () => {

        isDragging = false;

      });

    });

  </script>

</body>

</html>