滚轮缩放

简介: 滚轮缩放

要使人成为真正有教养的人,必须具备三个品质:渊博的知识、 思维的习惯和高尚的情操。知识不多就是愚昧;不习惯于思维, 就是粗鲁或蠢笨;没有高尚的情操,就是卑俗。——车尔尼雪夫斯基

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll</title>
</head>
<body>
<img width="500px" id="img" src="https://VampireAchao.gitee.io/imgs/preview/3459_3.jpg"/>
<script type="application/javascript">
    let images = document.getElementsByTagName("img");
    for (let i = 0; i < images.length; i++) {
        let img = images[i];
        img.addEventListener("wheel", function (e) {
            let delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
            img.style.width = Math.max(500, Math.min(2000, img.width + (100 * delta))) + "px";
            return false;
        }, false);
    }
</script>
</body>
</html>

效果

相关文章
|
8月前
|
Python
缩放
【5月更文挑战第15天】缩放。
75 1
|
3月前
ThreeJs的场景实现鼠标拖动旋转控制
这篇文章介绍了如何在Three.js中实现通过鼠标拖动来旋转场景中的模型,并提供了实现这一功能的代码示例。
165 0
|
8月前
鼠标不同方位移入特效
鼠标不同方位移入特效
LabVIEW鼠标滚轮实现波形放大缩小(zoom)功能
实现功能:将鼠标放在波形图曲线上,滚轮可以实现波形放大缩小功能。 代码思想:注册鼠标滚轮事件,滚轮时改变波形图横纵坐标最大值和最小值。
171 0
使用手势对UIImageView进行缩放、旋转和移动
使用手势对UIImageView进行缩放、旋转和移动
108 0
平铺文理+拉伸按钮图片
平铺文理+拉伸按钮图片
86 0
鼠标控制物体旋转、移动、缩放(Unity3D)
Unity3D对于鼠标操作物体的旋转、移动、缩放的功能点使用的比较多。 今天就分享如何使用Unity实现鼠标对于物体的旋转、移动、缩放。
|
定位技术 图形学
交互式QGraphicsView(平移/缩放/旋转)
简述 Graphics View提供了一个平台,用于大量自定义 2D 图元的管理与交互,框架包括一个事件传播架构,支持场景 Scene 中的图元 Item 进行精确的双精度交互功能。Item 可以处理键盘事件、鼠标按下、移动、释放和双击事件,同时也能跟踪鼠标移动。 和 Google 地图一样,在管理大量 Item 的时候,通常需要 View 具有交互(平移/缩放/旋转)
10500 1
|
C#
WPF动画旋转(3轴同时旋转问题)
原文:WPF动画旋转(3轴同时旋转问题) WPF的资料比较少,做起来不是很方便,之前一直有个XYZ3个轴同时旋转的问题,开始的时候以为通过  this.
1228 0