JS-以鼠标位置为中心的滑轮放大功能demo1

抱歉，作为一个语言模型AI，我无法提供演示demo。不过，我可以告诉你如何实现这个功能。

你可以监听鼠标滚动事件，当鼠标向上滚动时，放大页面；当鼠标向下滚动时，缩小页面。具体实现方法如下：

1. 监听鼠标滚动事件，可以使用以下代码：

window.addEventListener('mousewheel', function(event) {
    // 处理滚轮事件
});

2. 获取鼠标滚动方向，可以使用以下代码：

var delta = event.wheelDelta || -event.detail;
if (delta > 0) {
    // 向上滚动
} else {
    // 向下滚动
}

3. 根据鼠标位置计算缩放比例，可以使用以下代码：

var zoom = 1 + delta * 0.01; // 缩放比例
var x = event.clientX; // 鼠标横坐标
var y = event.clientY; // 鼠标纵坐标
var transform = 'translate(-' + x + 'px, -' + y + 'px) scale(' + zoom + ') translate(' + x + 'px, ' + y + 'px)';
document.body.style.transform = transform; // 改变页面缩放和位置

这样就可以实现以鼠标位置为中心的滑轮放大功能了。

相关问题

vue以鼠标位置为中心的滑轮放大缩放功能

你可以通过在`mounted`生命周期中监听鼠标滚轮事件，然后根据鼠标位置和缩放比例计算出视口的缩放中心点和缩放比例，最后使用`transform`样式对视口进行缩放。

以下是一个简单的实现示例：

<template>
  <div class="container" ref="container" @wheel="handleWheel">
    <div class="content" ref="content">
      <!-- your content here -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.container = this.$refs.container;
    this.content = this.$refs.content;
    this.scale = 1;
  },
  methods: {
    handleWheel(event) {
      const deltaX = event.deltaX;
      const deltaY = event.deltaY;
      const rect = this.container.getBoundingClientRect();
      const containerX = event.clientX - rect.left;
      const containerY = event.clientY - rect.top;
      const oldScale = this.scale;
      const newScale = oldScale + deltaY / 100;

      this.scale = Math.max(1, Math.min(newScale, 5));
      const scaleDelta = this.scale - oldScale;
      const offsetX = containerX * scaleDelta;
      const offsetY = containerY * scaleDelta;

      this.content.style.transformOrigin = `${containerX}px ${containerY}px`;
      this.content.style.transform = `scale(${this.scale}) translate(${offsetX}px, ${offsetY}px)`;
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.content {
  transform-origin: 0 0;
}
</style>

解释一下代码：

- 在`mounted`生命周期中获取容器和内容的引用，并初始化缩放比例为1。
- 在`handleWheel`方法中获取鼠标滚动的偏移量和容器相对于文档的位置，计算出缩放中心点和缩放比例。
- 根据缩放比例和中心点计算出内容偏移量，并将缩放和偏移应用到内容上。

需要注意的是，这个实现仅支持在容器内部进行缩放，如果需要支持在任意位置进行缩放，需要对容器的滚动条进行处理。

利用vue开发一套完整的以鼠标位置为中心的滑轮放大缩放功能

可以利用Vue和原生JavaScript实现以鼠标位置为中心的滑轮放大缩放功能。下面是一个简单的实现：

1. 首先，在Vue的template中定义一个div元素作为容器，设置一个类名zoom-container，用来容纳需要缩放的内容：

<template>
  <div class="zoom-container" @wheel="zoom"></div>
</template>

2. 在Vue的methods中定义一个zoom方法，用来处理滑轮事件，实现缩放功能：

methods: {
  zoom(e) {
    //获取当前鼠标位置
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    //获取当前鼠标滚轮方向
    const delta = e.deltaY || e.detail || e.wheelDelta;

    //计算缩放比例
    const scaleDelta = delta > 0 ? 0.9 : 1.1;

    //获取当前缩放比例
    const currentScale = this.scale;

    //计算缩放后的比例
    const newScale = currentScale * scaleDelta;

    //计算缩放后的偏移量
    const offsetX = (mouseX - this.$el.offsetLeft) * (1 - scaleDelta);
    const offsetY = (mouseY - this.$el.offsetTop) * (1 - scaleDelta);

    //应用缩放和偏移
    this.scale = newScale;
    this.offsetX += offsetX;
    this.offsetY += offsetY;
  }
}

3. 在Vue的data中定义scale、offsetX和offsetY三个变量，用来存储当前的缩放比例和偏移量：

data() {
  return {
    scale: 1,
    offsetX: 0,
    offsetY: 0
  };
}

4. 在Vue的computed中定义一个transformStyle计算属性，用来生成CSS transform样式，将缩放和偏移应用到容器上：

computed: {
  transformStyle() {
    return {
      transform: `scale(${this.scale}) translate(${this.offsetX}px, ${this.offsetY}px)`
    };
  }
}

5. 最后，在Vue的template中将transformStyle应用到容器上：

<template>
  <div class="zoom-container" :style="transformStyle" @wheel="zoom"></div>
</template>

现在，你就可以使用这个组件来实现以鼠标位置为中心的滑轮放大缩放功能了。