js实现图片预览【放大、缩小、拖动】

<style>
        #div{width:400px;height:400px;overflow:hidden;position:relative;border:1px solid #000;}
        #div img{position:absolute;height:100%;width:auto;cursor:move;}
</style>

<!-- 图片预览功能：收缩放，拖动js导入 -->
<script type="text/javascript" src="${ctx }/static/imgShow.js"></script>

<div id="div" onmousewheel="return bbimg(this)" align="left">
	<img id="img" alt="图片未上传！" src="${ctx }/static/a3.png" />
</div>

<script>
	<!-- 图片预览功能：收缩放，拖动 【初始化】-->
	startDrag(document.getElementById("img"),document.getElementById("img"))
</script>

导入js文件[imgShow.js]:

    var params = {
        zoomVal:1,
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0,
        flag: false
    };
    //ͼƬ����
    function bbimg(o){
        var o=o.getElementsByTagName("img")[0];
        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;
            }
 
 
        }
    };