JS的图片拖拽、放大、缩小

CV直接使用，注意：div的position必须是relative,img的position必须是absolute!!!!!!

1、body

<div class="threeImage">
    <img id="img" onmousewheel="return bbimg(this)" src="图片地址"  alt="">
</div>

2、CSS

.threeImage {
    position:relative;
    width: 3400px;
    height: 861px;
    overflow:hidden;
}
#id {
    position:absolute;
    width: auto;
    height: 100%;
    opacity: 0.5;
    cursor:move;
}

3、JS

<script language="javascript">
    // 请注意，div的position必须是relative,img的position必须是absolute!!!!!!
        var params = {
            zoomVal:1,
            left: 0,
            top: 0,
            currentX: 0,
            currentY: 0,
            flag: false
        };
        //图片缩放
        function bbimg(o){
            params.zoomVal+=event.wheelDelta/1200;
            if (params.zoomVal >= 0.2) {
                o.style.transform="scale("+params.zoomVal+")";
            } else {
                params.zoomVal=0.2;
                o.style.transform="scale("+params.zoomVal+")";
                return false;
            }
        }
        //获取相关CSS属性
        var getCss = function(o,key){
            return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
        };
        //拖拽的实现
        var startDrag = function(bar, target, callback){
            if(getCss(target, "left") !== "auto"){
                params.left = getCss(target, "left");
            }
            if(getCss(target, "top") !== "auto"){
                params.top = getCss(target, "top");
            }
            //o是移动对象
            bar.onmousedown = function(event){
                params.flag = true;
                if(!event){
                    event = window.event;
                    //防止IE文字选中
                    bar.onselectstart = function(){
                        return false;
                    }
                }
                var e = event;
                params.currentX = e.clientX;
                params.currentY = e.clientY;
            };
            document.onmouseup = function(){
                params.flag = false;
                if(getCss(target, "left") !== "auto"){
                    params.left = getCss(target, "left");
                }
                if(getCss(target, "top") !== "auto"){
                    params.top = getCss(target, "top");
                }
            };
            document.onmousemove = function(event){
                var e = event ? event: window.event;

                if(params.flag){
                    var nowX = e.clientX, nowY = e.clientY;
                    var disX = nowX - params.currentX, disY = nowY - params.currentY;
                    target.style.left = parseInt(params.left) + disX+ "px";
                    target.style.top = parseInt(params.top) + disY+ "px";

                    if (typeof callback == "function") {
                        callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
                    }

                    if (event.preventDefault) {
                        event.preventDefault();
                    }
                    return false;
                }


            }
        };
        startDrag(document.getElementById("img"),document.getElementById("img"))
</script>