鼠标滚轮控制缩放

最新推荐文章于 2022-11-09 15:23:48 发布
最新推荐文章于 2022-11-09 15:23:48 发布
阅读量213 收藏
点赞数
分类专栏： 游戏开发技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33007211/article/details/119675041
版权
本文介绍如何通过JavaScript实现网页中利用鼠标滚轮进行内容缩放的效果，包括核心代码解析和应用场景分析，帮助开发者提升用户体验。
摘要由CSDN通过智能技术生成 
public class Wheel : MonoBehaviour {
   
    public Camera cam;
    void Update()
    {
   
        //鼠标滚轮的效果
        //Camera.main.fieldOfView 摄像机的视野
        //Camera.main.orthographicSize 摄像机的正交投影
最低0.47元/天 解锁文章
O0oLin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现鼠标滚轮控制图片缩放效果的方法
10-24
主要介绍了js实现鼠标滚轮控制图片缩放效果的方法,涉及onmousewheel事件及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery实现的鼠标滚轮控制图片缩放功能实例
10-19
主要介绍了jQuery实现的鼠标滚轮控制图片缩放功能,结合完整实例形式分析了jQuery基于鼠标滚轮mousewheel事件进行页面元素属性动态操作的相关实现技巧,需要的朋友可以参考下
鼠标滚轮实现图片（普通div）缩放
weixin_34347651的博客
03-21 2699
核心是style中的一个zoom属性，平时很少用到。其实不只是img可以缩放，任何一个div都可以。代码：<img src="../docs/images/1.png" onmousewheel="return zoomImg(this)"> <div style="width:100px;height:100px;background-color: red"onmousewhe...
js鼠标滚轮放大缩小图片
wu7zhi的博客
04-18 4307
s鼠标滚轮放大缩小图片
Inkscape默认视图缩放快捷键设置修改
开发游戏的老王
11-18 1239
默认的视图缩放是Ctrl + 鼠标滚轮，用着不太习惯，希望尽量和Blender操作一致，修改设置如下
【canvas教程】实现画布拖动、定点缩放，支持手势与鼠标滚轮操作
Honiler的博客
11-09 5572
如果你对于canvas接触的比较少，在需要处理canvas绘制图表或图片的拖动、缩放等问题时可作参考。支持手势或鼠标滚轮定点缩放，可从图中选取某点（参照物）为中心点进行缩放，缩放时无论图像怎么变化，该点位置始终固定不变。
discuz鼠标滚轮缩放控件
06-25
标题中的“Discuz鼠标滚轮缩放控件”是指在Discuz论坛系统中，通过鼠标滚轮实现图片的缩放功能。Discuz是一款开源的PHP社区论坛软件，它允许用户自定义各种交互行为，包括对图片的操作。在这个特定的场景下，用户...
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
10-19
SCRIPT脚本控制页面不随ctrl+鼠标滚轮而缩放。 CSS可以控制页面文字大小不随浏览器设置而改变。 ``` 这段代码中，`scrollFunc`函数是处理`mousewheel`和`DOMMouseScroll`事件的核心。当事件触发时，它...
关于WPF你应该知道的2000件事
weixin_33729196的博客
08-14 1484
原文 关于WPF你应该知道的2000件事 以下列出了迄今为止为WPF博客所知的2,000件事所创建的所有帖子。 帖子总数= 1,201 动画 ＃7 - 基于属性的动画 ＃686 - 使用动画制作图像脉冲 ＃777 - 动画变换 ＃778 - 动画缩放变换 ＃779 - 动画旋转变换 ＃1,164 - 使用动画弹回控件 基本 ＃1 - 什么是WP...
Dock技术
Kevin's Blog
03-14 2606
Dock  复杂界面的停靠上面的停靠功能可以满足简单界面的需求了，那么考虑一个复杂的界面停靠操作。假设你的项目经理要求你在主界面上放置两个面板，上面的面板上有一个工具条，下面的面板上也有一个工具条。两个面板上的工具条都停靠操作，但是有一个要求是上面面板的工具条只能停靠在上面的面板上，同样下面的工具条也只能停靠在下面的面板上。 当组件在要停靠的组件上被拖动时，会调
Ubuntu18.04解决鼠标移动到Gnome顶栏左上角窗口不能平铺( Activites Overview 界面)，和应用程序扩展不好用问题。...
weixin_30502157的博客
05-29 285
在用习惯了GNOME我们知道一个很好的功能就是通过鼠标移动到Gnome顶栏左上角后所有打开的窗口就会平铺在显示器上方便我们选不同的窗口(Activites Overview 界面)，苹果MAC系统也有同样的功能叫做“Hot Corners”，但是这个功能在18.04中竟然不能用了只能点击顶栏的活动选项后才能平铺窗口，非常不方便，同时在添加Gnome扩展“Applications menu”后，鼠标...
OSGEarth 基于鼠标位置缩放
Rsoftwaretest的专栏
03-10 2983
说明 osgearth 原有漫游器EarthManipulator 不支持此功能，所以需要修改此漫游器代码，其中主要原理就是在缩放的同时也要改变当前漫游器中心焦点的位置，从而保持鼠标指定点的位置缩放是不改变。 核心代码修改部分 EarthManipulator 的头文件zoom方法添加参数view /** * Zoom the camera using delt...
OCC旋转，缩放和平移的实现
abcd5555abcd的博客
11-01 2072
1.首先在occview视图类里创建动作枚举类型和一些变量， protected: enum CurrentAction{ CurrentAction_Nothing,// CurrentAction_Panning,//平移，按住鼠标左键和右键并拖动进行平移操作 CurrentAction_Zooming,//缩放，滚动滚轮进行缩放 CurrentAction_Rotation//旋转，按住鼠标中间并拖动进行旋转 };..
鼠标滚轮实现放大缩小
lianxin19900610的博客
06-22 2147
var count = 10;     function Picture() {         count = Counting(count);         Resize(count);         return false;     }     function Counting(count) {         i
【three.js练习程序】鼠标滚轮缩放
weixin_34345560的博客
01-08 1628
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;ceshi&lt;/title&gt; &lt;script type="text/javascript" src=".\build\thr
鼠标滚轮实现缩放界面
cchoop的博客
07-27 2418
鼠标滚轮实现缩放界面 using UnityEngine; public class FllowPlayer : MonoBehaviour { private Transform player; private Vector3 offsetPosition; public float scrollSpeed = 10; public float rotateS...
EarthManipulator的缩放问题
梦之颠——应用与二次开发专栏
11-21 1221
EarthManipulator默认的操作是向里滚动，地球远了，向外滚动，地球进了。 我不太习惯这种操作，我个人认为向里滚动，地球近了，向外滚动，地球远了。 查找了一下EarthManipulator的源码，在初始化的时候简单修改一下。 _scroll_sens ( 1.0 ) 将1.0改为-1.0即可。 _scroll_sens ...
鼠标滚轮控制图片的放大和缩小
weixin_33691817的博客
04-15 771
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title&gt...
vue 编写一个鼠标滚轮控制缩放元素 长按拖动元素的代码
最新发布
03-01
下面是使用Vue编写的一个简单的鼠标滚轮缩放元素和长按拖动元素的代码： ```html <template> <div class="container" @wheel="onWheel" @mousedown="onMouseDown" @mouseup="onMouseUp" @mousemove="onMouseMove"> <div class="box" :style="{transform: 'scale(' + scale + ')', top: top + 'px', left: left + 'px'}"></div> </div> </template> <script> export default { data() { return { isDragging: false, // 是否正在拖动 startMouseX: 0, // 开始拖动时鼠标的X坐标 startMouseY: 0, // 开始拖动时鼠标的Y坐标 startBoxLeft: 0, // 开始拖动时盒子的左侧位置 startBoxTop: 0, // 开始拖动时盒子的顶部位置 scale: 1, // 缩放比例 top: 0, // 盒子的顶部位置 left: 0 // 盒子的左侧位置 } }, methods: { // 鼠标滚轮事件 onWheel(event) { // 滚动一次改变0.1倍缩放比例 this.scale += event.deltaY > 0 ? -0.1 : 0.1; // 缩放比例的最小值为0.1，最大值为3 if (this.scale < 0.1) { this.scale = 0.1; } else if (this.scale > 3) { this.scale = 3; } }, // 鼠标按下事件 onMouseDown(event) { // 如果点击的是盒子 if (event.target.classList.contains('box')) { this.isDragging = true; this.startMouseX = event.clientX; this.startMouseY = event.clientY; this.startBoxLeft = this.left; this.startBoxTop = this.top; } }, // 鼠标抬起事件 onMouseUp(event) { this.isDragging = false; }, // 鼠标移动事件 onMouseMove(event) { if (this.isDragging) { const offsetX = event.clientX - this.startMouseX; const offsetY = event.clientY - this.startMouseY; this.left = this.startBoxLeft + offsetX; this.top = this.startBoxTop + offsetY; } } } } </script> <style scoped> .container { width: 500px; height: 500px; position: relative; border: 1px solid #ccc; overflow: hidden; } .box { width: 100px; height: 100px; position: absolute; top: 0; left: 0; background-color: red; cursor: move; } </style> ``` 在这个示例中，我们创建了一个容器和一个红色的盒子。我们监听了容器的鼠标滚轮事件、鼠标按下事件、鼠标抬起事件和鼠标移动事件，来实现缩
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值