现在的滑鼠大多是有滚轮的,滚轮用惯了之后,若用到没滚轮的还真的给它有点不习惯。滚轮可以在浏览文章时(网页或是记事本...)可以快速卷动文章用,甚至有些还可以用来缩放图片的大小。
ㄟ~用滚轮来缩放好像还蛮方便的厚!虽然不一定用的到,但至少有一定的便利程度。所以,这次要教如何用滑鼠滚轮来缩放图片。
先看Body部份:
我放了一张图片并用了一个Event-onmousewheel,顾名思义就是当滑鼠滚动时会触发这Event,所以若这Event被触发时也会触发zoomPic()函式。而span是要用来看图片缩放比例资讯用的。
接着看JavaScript:
一开始图片预设显示大小为100(%),当触发zoomPic()函式时,会把该图片的id当做参数来用,接着就判断滚轮是往上滚还是往下滚来取得缩放比例,且滚轮滚动一格时会触发Event,可以用wheelDelta来取得滚动多少,若大于等于120表示往上滚一格,则percent加10(%);小于等于-120表示往下滚一格,则percent减10(%),但最小缩放限制为10%。取完缩放比例后就能进行缩放了,这边是用style.zoom来指定缩放大小。最后会回传false,若不回传false的话,网页也会随着滚轮上下动喔。
可是酱子随便滚动一下滑鼠就有可能会缩放到图片了耶,为了避免这种情形,我们可以加个条件,像是要按住CTRL并滑鼠在图片上滚动时才会缩放。
这样只要在程式码中加个if来判断就好了:
没几行程式码,就能做到这样的变化了,其实不只图片可以,整个网页都能用这方法来缩放,这留给各位去尝试了。
范例浏览:
http://abgne.myweb.hinet....014_1.htmlhttp://abgne.myweb.hinet....014_2.html以上内容于2005/11/18发表在小弟的Blog里
http://blog.xuite.net/abgne/diary1/4409947