鼠标滚轮实现图片的无极缩放问题

我想要鼠标滚轮实现图片的无极缩放功能，缩放后图片的长宽高不改变，最好能实现以鼠标为中心的缩放，在网上找了一些代码，但是效果都不理想，希望各位大侠能指点一下！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://blog.csdn.net/muxrwc/archive/2007/08/01/1721227.aspx兼容IE6 FF OP:D
噢。。看了眼需求。。LZ要的那个效果的话，只需要把这demo修改下。。把图片放到div中。然后在加些代码控制scroll即可具体的就不给你写了:D
muxrwc(需时越兔),本人比较菜，没怎么做过B/S的东西，麻烦能详细说一下吗
vml可以参考，很多资料网上有，要自学的：）
http://www.mzwu.com/article.asp?id=831
基本就是这个意思。。只不过滚动条的控制看你想怎么设置控制滚动条的方法下面的CODE已经有了。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滚动效果</title>
<script type="text/javascript">
(function (bool) {
//兼容FF一些方法
    window.FF = bool;

    if (bool) {

        window.attachEvent = document.attachEvent = window.HTMLElement.prototype.attachEvent = function (property, func, bool) {
            //兼容attachEvent方法
            return this.addEventListener(property.replace(/^on/, ""), func, bool || false);
        };        window.__defineGetter__("event", function () {
        //兼容Event对象
            var o = arguments.callee;

            do {
                if (o.arguments[0] instanceof Event) return o.arguments[0];
            } while (o = o.caller);

            return null;
        });

        Event.prototype.__defineGetter__("srcElement", function () {
        //兼容Event.srcElement对象
            return this.target;
        });

        MouseEvent.prototype.__defineGetter__("wheelDelta", function () {
        //返回鼠标滚轮状态
            return this.detail * -1;
        });
    }

})(/Firefox/.test(window.navigator.userAgent));var Class = {
//创建类
    create : function () {
        return function () {
            this.initialize.apply(this, arguments);
        };
    }
};var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};var wheel = Class.create();wheel.prototype = {
//鼠标滚动图片类
    initialize : function (obj, img, num) {
    //初始化参数
        var wc = this;
wc.img = img;
        obj.attachEvent(!window.FF ? "onmousewheel" : "DOMMouseScroll", function () {
            wc.move(num * (window.event.wheelDelta > 0 ? -1 : 1));
        });

        wc.item = [
            [ img.offsetWidth, "width", "offsetWidth" ], [ img.offsetHeight, "height", "offsetHeight" ]
        ].sort(function (a, b) { return b[0] - a[0]; }); //把高和宽从大到小排序
    },

    move : function (num) {
    //改变值
        var wc = this, img = wc.img, a = wc.item;

        //大值除以小值在乘以固定值就是比例缩放
        img.style[a[0][1]] = Math.max(
            img[a[0][2]] + Math.round(a[0][0] / a[1][0] * num), a[0][0]
        ) + "px";

        //小值不用管
        img.style[a[1][1]] = Math.max(
            img[a[1][2]] + num, a[1][0]
        ) + "px";
    }

};window.attachEvent("onload", function () {
    var wc = new wheel($("divds"), $("div"), 10);

    $("a").onclick = function () {
        wc.move(50);
    };

    $("b").onclick = function () {
        wc.move(-50);
    };
});var change = function () {
with ($('divds')) {
scrollLeft = scrollTop = 100;
}
};
</script>
</head>
<body>
<div id="divds" style="height:100px; width:400px; overflow:hidden;">
<img id="div" height="60" width="280" src="http://hi.csdn.net/images/csdnlogo.gif" alt="" />
</div>
<br />
<input id="a" type="button" value="加" /> <input id="b" type="button" value="减" />
<input type="button" onclick="change()" value="改变滚动条" />
</body>
</html>
/fd，我这个可以直接测试。不需要prototype.js补助需要的那两个prototype.js的code都已经挖掘出来了。。:D