使用鼠标滚轮进行页面缩放,点击并拖动以平移页面
P粉308783585
P粉308783585 2024-03-26 14:11:27
[HTML讨论组]

如何使用鼠标滚轮为整个页面制作滚动和平移效果?基本上就像任何 2D 编辑器一样,通过滚动进行缩放,单击并拖动进行平移,但适用于整个主体。

我在网上找不到任何有关它的信息。

P粉308783585
P粉308783585

全部回复(1)
P粉466643318

如果您不知道从哪里开始,您很快就会碰壁,因为知道从哪里开始是最容易的部分。这是一个粗略的指南:

  1. 将事件侦听器添加到 wheel 事件(了解操作方法](https://stackoverflow.com/a/51276012/104380 a>))
  2. 从初始(当前)zoom 值开始,计算轮子事件的增量并更新您的 zoom 值。
  3. 使用 zoom 值以某种形式操纵页面的比例。您可以在 body 元素上使用 CSS transform:scale() 来实现此目的。
  4. mousemove 事件添加事件侦听器(了解操作方法](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event))
  5. 根据检测到的鼠标移动采取行动,并计算需要平移缩放的 body 元素多少才能到达 4 个边缘中的任何一个,而不是超出。 平移可以通过 CSS transform:translate(x, y)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号