鼠标滚动调整图片大小（css3 zoom 放大缩小）

文章目录

zoom 作用说明
语法案例解释
onmousewheel 鼠标滚动，图片缩放
- 鼠标滚动事件

zoom 作用说明

设置或检索对象的缩放比例。

normal：使用对象的实际尺寸。
<number>：用浮点数来定义缩放比例。不允许负值
<percentage>：用百分比来定义缩放比例。不允许负值

语法案例解释

<!DOCTYPE html>
<html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>zoom_CSS参考手册_web前端开发参考手册系列</title><style>body {line-height: 1.5;}h1 {margin: 0;font-size: 16px;font-family: Arial;}.test {zoom: normal;}.test2 {zoom: 5;}.test3 {zoom: 300%;}</style></head><body><h1>zoom:normal</h1><div class="test">zoom:normal</div><h1>zoom:5</h1><div class="test2">zoom:5</div><h1>zoom:300%</h1><div class="test3">zoom:300%</div></body>
</html>

onmousewheel 鼠标滚动，图片缩放

<!DOCTYPE html>
<html lang="zh-cmn-Hans"><head><meta http-equiv="Content-Language" content="zh-cn" /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>用鼠标滚轮滚动控制图片的缩小放大</title><script language="javascript">function bbimg(o) {console.log(event.wheelDelta);var zoom = parseInt(o.style.zoom, 10) || 100;zoom += event.wheelDelta / 12;if (zoom > 0) o.style.zoom = zoom + "%";return false;}</script></head><body><p>将鼠标放在图片上，点击一下，然后滚动鼠标滚轮试试看</p><p><img border="0" src="/images/222.png" onmousewheel="return bbimg(this)" /></p></body>
</html>

firefox 中没有 onmousewheel 事件，可以使用 DOMMouseScroll 事件代替

鼠标滚动事件

参考一文读懂鼠标滚轮事件（wheelEvent）

1、可靠属性：deltaY，方向判断方法一致（正值向下滚动，负值向上滚动），与操作系统鼠标设置有关联，但需注意绝对值算法不统一

2、兼容性，属性差异：

detail: firefox中起作用，detail只取±3，其中正数表示为向上，负数表示向下
wheelDelta: chrome中起作用， wheelDelta只取±120，其中正数表示为向上，负数表示向下

3、功能方面：Firefox能直观反映滚动行数，但不能直观与浏览器默认滚动条保持同步；其他几组浏览器则恰好相反；

4、个人建议：个人认为wheelDelta的最初设计思想很好，电脑鼠标滚轮垂直行数默认值是3，wheelDelta默认值120，即单行行高40px，即使用户电脑做了个性化设置，像素值也不会出现循环小数，避免了Chrome的deltaY设计缺陷，有利于行业规范化，所以建议各浏览器厂商能完整支持wheelDelta这一属性。

鼠标滚动调整图片大小（css3 zoom 放大缩小）相关推荐

鼠标滚动缩放图片效果
前段时间本人在做项目时,做了一个鼠标滚动缩放图片效果,图片支持多个,多个图片循环缩放,花了点时间整理了下,把它贴出来,与大家分享下,在ie6.0,ie7.0,firefox都测试过,没有问题. < ...
IDEA如何设置鼠标滚轮调整字体大小
IDEA如何设置鼠标滚轮调整字体大小之前介绍过IDEA的字体设置IDEA字体调整,但这样修改起来太麻烦,IDEA可以支持快捷键快速修改字体的大小(神器吧~),我们来看一下如何配置: 打开Settin ...
如何等比例调整图片大小？
如何等比例调整图片大小?将图片尺寸大小调整成我们需要的,是图片使用过程中最常见的,等比例调整图片尺寸大小可以防止图片变形,图片变形会使得图片无法使用,所以非常的重要.为了帮助大家提高工作效率,今天小编 ...
Mac电脑用预览功能调整图像大小?Mac调整图片大小方法
要说到修改一张图片的尺寸大小,很多人的第一反应通常是打开 Photoshop 或者 Pixelmator,其实使用苹果MAC电脑有更简单方便的方法来调整图片的大小尺寸,OS X 自带的快速预览功能就可 ...
【Axure视频教程】鼠标滚动缩放图片
今天教大家制作鼠标滚动缩小放大图片的原型模板,包括向下滚动放大.向上滚动缩小.拖动图片移动到指定位置的效果.该教程从材料准备到完成交互,手把手的教学. [视频教程--试看版] [Axure视频教程]鼠 ...
html幻灯片图片大小,如何制作ppt？如插入图片、调整图片大小与母版一致！
ppt转换视频,大家还是比较少用吧,有一款新颖的ppt转换器,就可以把ppt转换成任意一种流行格式的视频哦! ppt转换视频官方软件下载: 如何制作ppt(基本简单操作): 1.首先准备好要做成模版的 ...
python调整图片大小不覆盖exif_python---基础知识回顾（十一）图像处理模块PIL
前戏: 虽然PIL没有入OpenCV那样强大的功能,但是所提供的功能,在一般的图像处理中足够使用. 图像类别: 计算机绘图中有两类图像:一类是矢量图,另一类是点阵图(位图) 矢量图: 基于计算机数字对 ...
SwiftUI调整图片大小适应手机屏幕
参数设置如下 Image("imageName").resizable().aspectRatio(contentMode: .fit) 其他调整图片大小参数 Image(&quo ...
怎么调整图片大小还不影响清晰度？
怎么调整图片大小还不影响清晰度?很多时候我们用到图片的地方都会对图片大小有要求,有时候将图片放大到一定的大小,但如果直接放大会造成图片模糊,像打了马赛克一样无法使用,怎么才能实现又放大图片又不失真呢? ...