文章目录
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这一属性。
