js鼠标控制图片的特效，滚轮控制放大、缩小、鼠标拖动、聚焦。。。

项目需要做一个js控制图片的特效，滚轮控制放大、缩小、鼠标拖动等效果，网上找方法，各种报错、不兼容。。。最终自己研究出一套方案如下：

代码直接从项目中拷了，就不整理格式了

<script type="text/javascript">
        //图片特效 by jifei_mei
        //图片大小，记录放大或缩小图片前的大小
        var pic_size = {
                width:0,
                height:0
        };
        //绑定滚轮滚动事件
        if (window.addEventListener) {
            window.addEventListener(‘DOMMouseScroll‘, function(event) {
                var targetId = $(event.target).attr("id")+‘‘;
                if(targetId== ‘currentPicture‘||targetId==‘currentPictureImg‘){
                    decideSignal(event.detail);
                }
            }, false);
        }
        window.onmousewheel = document.onmousewheel = function(event) {
            event = event || window.event;
            var targetId = event.srcElement.id+‘‘;
            if(targetId== ‘currentPicture‘||targetId==‘currentPictureImg‘){
                decideSignal(event.wheelDelta);
            }
        }
        //判断动作方向：0非法、1向上、-1向下
        function decideSignal(signal){
            var eventSignal = 0;
            if(signal==-3||signal==120||signal==360){
                eventSignal = 1;
            }
            if(signal==3||signal==-120||signal==-360){
                eventSignal = -1;
            }
            resizeImage(eventSignal);
        }
        function resizeImage(eventSignal){
            //非法操作！不处理
            if(eventSignal==0){
            }
            var height = $("#currentPictureImg").attr("height");
            var width = $("#currentPictureImg").attr("width");
            var h = parseInt(height);
            var w = parseInt(width);
            pic_size = {
                width:$("#currentPictureImg").width(),
                height:$("#currentPictureImg").height()
            };
            //放大
            if(eventSignal>0){
                h += 5;
                w += 5;
            }
            //缩小
            if(eventSignal<0){
                h -= 5;
                w -= 5;
                if(h==0){
                    h = 5;
                }
                if(w==0){
                    w = 5;
                }
            }
            //改变图片大小
            $("#currentPictureImg").attr("height",h+"%");
            $("#currentPictureImg").attr("width",w+"%");
            changeImagePositionToOldImageCenter();
        }
        //使图片中心聚焦到放大前的图片中心
        function changeImagePositionToOldImageCenter(){
            var left = parseInt($("#currentPictureImg").css(‘left‘));
            var top =  parseInt($("#currentPictureImg").css(‘top‘));
            var height = $("#currentPictureImg").height();
            var width = $("#currentPictureImg").width();
            left = (pic_size.width-width)/2+left;
            top = (pic_size.height-height)/2+top;
            $("#currentPictureImg").css({
                ‘left‘:left+‘px‘,
                ‘top‘:top+‘px‘
            });
        }
        //使图片聚焦中间
        function changeImagePositionToCenter(){
            var height = $("#currentPictureImg").height();//图片宽高
            var width = $("#currentPictureImg").width();
            var h = $("#currentPicture").height();//图片展示区宽高
            var w = $("#currentPicture").width();
            var left = (w-width)/2;
            var top = (h-height)/2;
            $("#currentPictureImg").css({
                ‘left‘:left+‘px‘,
                ‘top‘:top+‘px‘
            });
        }
        //鼠标拖动事件
        var isIE = (window.navigator.userAgent.indexOf("IE") == -1) ? false : true;//判断是否是IE
        var isIE_8 = -1;
        if(navigator.userAgent.indexOf("MSIE")>0){
            if((navigator.userAgent.indexOf("MSIE 8.0")>0)||(navigator.userAgent.indexOf("MSIE 9.0")>0 && !window.innerWidth)){
                isIE_8 = 8;
            }else {
                var IE_V = navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")).substring(5,8);
                isIE_8 = parseInt(IE_V);
            }
         }
        //判断是否是按下左键(左键拖动有效)
        function isLeftButton(btn) {
            if(isIE&&isIE_8<=8) {
                if(btn == 1)
                    return true;
                else
                    return false;
            } else {
                if(btn == 0)
                    return true;
                else
                    return false;
            }
        }
        var leftMouseDown = false;//是否按下鼠标左键
        var pos = {
                x:0,
                y:0
        };
        function bind(ev, func) {
            if(!window.addEventListener) {
            　　header.attachEvent("on" + ev, func);
            } else {
            　　header.addEventListener(ev, func, false);
            }
        }
        //鼠标按下的事件
        function mouseDown(event){
            event = event || window.event;
            if(!isLeftButton(event.button))
                return;
            leftMouseDown = true;
            if (event.preventDefault) {
                event.preventDefault();
            }
            else {
                event.returnvalue = false;
            }
            pos = {
                    x:event.clientX,
                    y:event.clientY
            };
        }
        //鼠标松开事件
        function mouseUp(event){
            event = event || window.event;
            leftMouseDown = false;
        }
        //鼠标移动事件
        function mouseMove(event){
            event = event || window.event;
            if(!leftMouseDown)
                return;
            var left = parseInt($("#currentPictureImg").css(‘left‘));
            var top =  parseInt($("#currentPictureImg").css(‘top‘));
            console.info(left);
            left = left+(event.clientX-pos.x);
            top = top+(event.clientY-pos.y);
            $("#currentPictureImg").css({
                ‘left‘:left+‘px‘,
                ‘top‘:top+‘px‘
            });
            pos = {
                    x:event.clientX,
                    y:event.clientY
            };
        }
        if(isIE){
            $("#currentPictureImg").bind( ‘mousedown‘,function(event){
                event = event || window.event;
                mouseDown(event);
            });
            $("#currentPictureImg").bind( ‘mouseup‘,mouseUp);
             $("#currentPictureImg").bind(‘mousemove‘,mouseMove);
        }
        $("#currentPicture").bind(‘mousedown‘,mouseDown);
        $("#currentPicture").bind(‘mouseup‘,mouseUp);
        $("#currentPicture").bind(‘mousemove‘,mouseMove);

        //导航图标点击事件
        $("#moveup").click(function(){
            var top =  parseInt($("#currentPictureImg").css(‘top‘));
            top = top-50;
            $("#currentPictureImg").css(‘top‘,top+‘px‘);
        });
        $("#movedown").click(function(){
            var top =  parseInt($("#currentPictureImg").css(‘top‘));
            top = top+50;
            $("#currentPictureImg").css(‘top‘,top+‘px‘);
        });
        $("#moveleft").click(function(){
            var left =  parseInt($("#currentPictureImg").css(‘left‘));
            left = left-50;
            $("#currentPictureImg").css(‘left‘,left+‘px‘);
        });
        $("#moveright").click(function(){
            var left =  parseInt($("#currentPictureImg").css(‘left‘));
            left = left+50;
            $("#currentPictureImg").css(‘left‘,left+‘px‘);
        });
        $("#zoomin").click(function(){
            resizeImage(1);
        });
        $("#zoomout").click(function(){
            resizeImage(-1);
        });
        $("#movecenter").click(function(){
            changeImagePositionToCenter();
        });
        $("#zoomf").click(function(){
            $("#currentPictureImg").attr("height","100%");
            $("#currentPictureImg").attr("width","100%");
            $("#currentPictureImg").css({
                ‘left‘:‘0px‘,
                ‘top‘:‘0px‘
            });
        });
</script>

<div id="currentPicture" ><!-- 浮动层导航图标 -->
<div id="myDiv" style="position: absolute;z-index: 999;left:270px;top:90px;">
<table>
<tr><td></td><td><a href="javascript:void(0);" id="moveup"><img src="up.gif"/></a></td><td></td></tr>
<tr><td style="padding-right:4px;"><a href="javascript:void(0);" id="moveleft"><img src="left.gif"/></a></td>
<td><a href="javascript:void(0);" id="movecenter"><img src="zoom.gif"/></a></td>
 <td style="padding-left:4px;"><a href="javascript:void(0);" id="moveright"><img src="right.gif"/></a></td>
</tr>
 <tr><td></td><td><a href="javascript:void(0);" id="movedown"><img src="down.gif"/></a></td><td></td></tr>
<tr><td></td><td><a href="javascript:void(0);" id="zoomin"><img src="zoom_in.gif"/></a></td><td></td></tr>
<tr><td></td><td><a href="javascript:void(0);" id="zoomf"><img src="zoomf.gif"/></a></td><td></td></tr>
<tr><td></td><td><a href="javascript:void(0);" id="zoomout"><img src="zoom_out.gif"/></a></td><td></td></tr>
</table>
 </div>
<img style="position: relative;z-index:-1;cursor:pointer;left:0px;top:0px;" id="currentPictureImg" src="" height="100%" width="100%" onerror="javascript:noPicture(this)" />
</div>

代码有点长╮(╯_╰)╭既然是特效，就要duang嘛，有耐心的测试一下吧！当然还有很多需要优化的地方，目的是为了能看懂

IE、Firefox、chrome、世界之窗没问题