如何缩小html中的图片鼠标感应区域,自定义mousewheel事件，实现图片放大缩小功能实现...

本文是承接 上一篇的《自定义鼠标滚动事件》  的基础上实现的，建议大家先看一下上一篇的mousewheel的实现，再浏览下文：

上篇中我们介绍到:

1 $element.mousewheel(function(dir){2 console.log(dir) ;3 })

View Code

得到的结果为：鼠标滚轮 向上滚动 dir-->1, 向下滚动 dir-->-1

ok，有了这个结果 我们就可以做下边的工作了...

to know what's I want...

目标:滚动鼠标滚轮实现图片合理的放大缩小，何为合理？即：不能让图片失真，至少比例要一致(成比例放大或缩小)

思路：有了dir这个属性，让图片向上滚动时，成比例放大；向下滚动时，图片成比例缩小；

也就是说 dir=1时，图片的宽高在原有基础上，保持比例一致的增大，dir=-1时，图片的宽高在原有基础上，保持比例一致的缩小。

(此时的你是不已经 有点灵感了呢 ：)，貌似 这次重点不在如何判断鼠标的滚动方向啦，而是，如何*合理的放大和缩小了啊...)

来吧，忍不住了 我要 coding....

1.HTML + CSS:先来写个页面

1 2345SE - 点击图片放大 显示 67 html,body,*{margin:0;padding:0; }8 ul{list-style:none; }9 li{float:left;margin-left:10px; }10 ul li a{display:block; }1112131415161718192021