Question. 问题
显示屏大小有限，因此网页上的单张图片尺寸必须有所限制，但是对于图片中有重要信息需要被用户浏览，就不能使图片尺寸过小，
那么怎么在默认加载时显示的小图片，用户能够通过友好的方式看到图片完整的信息呢？
像这样的需求在实际开发中会碰到很多，比如最常见的网页地图，浏览器窗口不可能将地图全部铺开，一种好的方式就是通过滚轮实现局部的放大缩小，交由用户决定是否需要浏览该部分的详细信息。
又比如教程类的网站，发布的图文教程，图片可能是直接通过屏幕截图截取的某个软件的操作界面，学习者在浏览整片图文教程的时候可能不需要去看截图中的细节，但是当用户需要对于每一个步骤的图文进行详细查看时，就需要查看大图，滚轮滚动是一种优雅的显示大图的方案，它可以就在当前位置放大图片，不打扰用户的阅读思路，同时可以自由掌握放大缩小的尺度，更加灵活。
Solution. 解决
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img border="0" src="demo.jpg" onmousewheel="return rollImg(this)">
</body>
<script language="javascript">
function rollImg(o){
/* 获取当前页面的缩放比
若未设置zoom缩放比，则为默认100%，即1，原图大小
*/
var zoom=parseInt(o.style.zoom)||100;
/* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
*/
zoom+=event.wheelDelta/12;
/* 如果缩放比大于0，则将缩放比加载到页面元素 */
if (zoom>0) o.style.zoom=zoom+'%';
/* 如果缩放比不大于0，则返回false，不执行操作 */
return false;
}
</script>
</html>
这里主要有两个知识点，一个是 CSS 的知识点，zoom 缩放比；另一个是 JS 知识点，wheelDelta 滚动值，onmousewheel 获取滚轮值事件。
Effection. 效果
缩放的效果：
这是我的二维码，如果显示在网页中，太大了网页就会很难看，但太小了，手机又很难扫，通过鼠标滚轮实现缩放二维码的效果，就能较好的解决默认情况下考虑页面美观显示小图标二维码，需要扫码的情况下不需要点开另一个页面进行扫码。
版权声明：本文为JasonAPoint原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。