滚轮缩放

简介: 滚轮缩放

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

代码

<!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>

效果

相关文章
|
1月前
边框虚线滚动动画特效
边框虚线滚动动画特效
|
1月前
鼠标不同方位移入特效
鼠标不同方位移入特效
|
11月前
Avalonia 实现平滑拖动指定控件
Avalonia 实现平滑拖动指定控件
137 0
|
11月前
LabVIEW鼠标滚轮实现波形放大缩小(zoom)功能
实现功能:将鼠标放在波形图曲线上,滚轮可以实现波形放大缩小功能。 代码思想:注册鼠标滚轮事件,滚轮时改变波形图横纵坐标最大值和最小值。
95 0
|
移动开发 前端开发 JavaScript
Canvas之鼠标滑动特效
Canvas之鼠标滑动特效
197 0
Canvas之鼠标滑动特效
|
定位技术 图形学
交互式QGraphicsView(平移/缩放/旋转)
简述 Graphics View提供了一个平台,用于大量自定义 2D 图元的管理与交互,框架包括一个事件传播架构,支持场景 Scene 中的图元 Item 进行精确的双精度交互功能。Item 可以处理键盘事件、鼠标按下、移动、释放和双击事件,同时也能跟踪鼠标移动。 和 Google 地图一样,在管理大量 Item 的时候,通常需要 View 具有交互(平移/缩放/旋转)
10230 1
淡入淡出垂直选项卡
在线演示       本地下载
745 0
|
C#
WPF无边框拖动、全屏、缩放
原文:WPF无边框拖动、全屏、缩放 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/lwwl12/article/details/78059361 先看效果 无边框 设置WindowStyle=”None”,窗口无关闭及缩放按钮,但还有黑边;设置AllowsTransparency=”True”,黑边没有了。
1998 0