鼠标滚轮缩放图片

浏览网页的时候，有时候图片局限于网站而很小，即便原来是一张大图。为了偷懒不想新标签页打开图片，于是写了个小小的 bookmarklet 来直接在图片上通过鼠标滚轮来进行缩放。

javascript:(function(){var imgs=document.getElementsByTagName('img');var rate=rate||0.1;for(var j=0,l=imgs.length;j<l;j++){(function(i){var item=imgs[i];item.onmousewheel=function(e){e=e||window.event;zoom(imgs[i],mouseWheelRes(e),rate);};if(item.addEventListener){item.addEventListener('DOMMouseScroll',function(e){zoom(imgs[i],mouseWheelRes(e),-rate);},false);}})(j);}function zoom(img,inOut,rate){if(inOut>0){img.width=img.width*(1+rate);img.height=img.height*(1+rate);}else{img.width=img.width*(1-rate);img.height=img.height*(1-rate);}}function mouseWheelRes(e){e.preventDefault?e.preventDefault():e.returnValue=false;e.stopPropagation?e.stopPropagation():e.cancelBubble=true;return e.wheelDelta||e.detail;}})();

可读性良好一些的代码如下：

function scrollZoomImg(rate) {
    var imgs = document.getElementsByTagName('img');
    var rate = rate || 0.1;
    for (var j = 0, l = imgs.length; j < l; j++) {
        (function(i) {
            var item = imgs[i];
            item.onmousewheel = function(e) {
                e = e || window.event;
                zoom(imgs[i], mouseWheelRes(e), rate);
            };
            if (item.addEventListener) {
                // for firefox
                item.addEventListener('DOMMouseScroll', 
                function(e) {
                    // use the opposite value in firefox
                    zoom(imgs[i], mouseWheelRes(e), -rate);
                },
                false);
            }
        })(j);
    }

    function zoom(img, inOut, rate) {
        if (inOut > 0) {
            // scroll up
            img.width = img.width * (1 + rate);
            img.height = img.height * (1 + rate);
        } else {
            // scroll down
            img.width = img.width * (1 - rate);
            img.height = img.height * (1 - rate);
        }
    }

    function mouseWheelRes(e) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
        return e.wheelDelta || e.detail;
    }
}

// call the method
scrollZoomImg()

关于鼠标滚轮事件的浏览器不同表现，可以参考文底的 References。这个地方主要是 Firefox 比较特殊，不是使用 mousewheel 事件而是使用 DOMMouseScroll 事件，并且大小写敏感。Firefox 使用 detail 而不是 wheelDelta 来表述滚动值；用负值来表示向上滚动而不是如别的浏览器那般用正值。至于值的大小关系不大。

所以，上面代码的逻辑很直接，获取所有的图片，绑定鼠标滚轮事件。调用 zoom 的时候，对 Firefox 返回的值做了取反操作。提供了一个缩放的比例，默认以 0.1 的速率缩放。

由于只是一个小工具，所以并没有试图作猜测判读是否是缩略图链接到大图的形式，从而载入清晰的大图。这里的假设是原本是一张清晰的大图，但限于页面布局缩小而难以看清。所以，对于就是那么大的图片，放大自然会变得模糊。

确切地说，这个 bookmarklet 用得不多，但确也时不时使用。

References

3条评论