js实现图片在div内滚轮放大缩小，有滚动条，双击回原状

效果图：

<style type="text/css"> 
	*{padding:0;margin:0;} 
	img{border:none;} 
	#display{max-width:660px;max-height:510px;margin:30px auto;overflow:scroll;} 
</style> 

<script type="text/javascript">
	function orgsize(){			
		 $("#showimg").width(650);
		 $("#showimg").height(500);	
		 $('#showimg').css("margin-left","1px");
		 $('#showimg').css("margin-top","1px");
	 }
	
	var div1 = document.getElementById("showimg");
	var offX = 0,offY = 0;
	div1.onmousedown = function(ev){
	    ev.preventDefault(); //阻止浏览器动作，有些浏览器试图拖拽图片的时候，是会把图片单独到一个页面来查看的。
	　　var oevent = ev || event; //兼容性处理
	　　var distanceX = oevent.clientX; //记录鼠标点击x位置
	　　var distanceY = oevent.clientY; //记录鼠标点击y位置
	    document.onmousemove = function(ev){ //当鼠标点击后，才对document设置mousemove事件
	        var oevent = ev || event;
	        x1 = oevent.clientX - distanceX;//oevent.clientX是鼠标移动到的x位置，oevent.clientX-distanceX是移动的距离
	        y1 = oevent.clientY - distanceY;
	        distanceX = oevent.clientX; //更新distanceX的位置信息。这一步非常重要非常重要非常重要，因为mousemove事件在鼠标移动时触发，而不是鼠标停止移动后触发
	        distanceY = oevent.clientY;
	        div1.style.marginLeft = (x1 + offX) + "px"; //若x1为正，则鼠标向右移动，设置图片的margin-left为正，向右偏移；为负同理向左偏移。
	        div1.style.marginTop = (y1+ offY) +"px"; //offX和offY为前一次的偏移，本次移动是在前一次的基础上发生的，要加上偏移值才是鼠标本次移动后图片的位置。
	        offX = x1+offX; //记录此时图片的偏移位置
	        offY = y1+offY;
	　　　　};
	　　document.onmouseup = function(){ //鼠标抬起后，就取消document的mousemove事件
	            document.onmousemove = null;
	　　};
	      
	}

</script>
    
<script type="text/javascript"> 

	window.onload=function(){ 
	    var display = document.getElementById('display'); 
	    var _wheelDelta=0,upcheck=-1; 
	    addScrollListener(display,wheelHandle); 
	} 
	function addScrollListener(element, wheelHandle) { 
	    if(typeof element != 'object') return; 
	    if(typeof wheelHandle != 'function') return; 
	    // 监测浏览器 
	    if(typeof arguments.callee.browser == 'undefined') { 
	        var user = navigator.userAgent; 
	        var b = {}; 
	        b.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object"; 
	        b.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !b.opera; 
	        b.ie = user.indexOf("MSIE") > -1 && !b.opera; 
	        b.gecko = user.indexOf("Gecko") > -1 && !b.khtml; 
	        arguments.callee.browser = b; 
	    } 
	    if(element == window) 
	        element = document; 
	    if(arguments.callee.browser.ie) 
	        element.attachEvent('onmousewheel', wheelHandle); 
	    else 
	        element.addEventListener(arguments.callee.browser.gecko ? 'DOMMouseScroll' : 'mousewheel', wheelHandle, false); 
	} 
	function getStyleValue(objname,stylename){ 
	    if(objname.currentStyle){ 
	        return objname.currentStyle[stylename] 
	    }else if(window.getComputedStyle){ 
	        stylename = stylename.replace(/([A-Z])/g, "-$1").toLowerCase();  
	        return window.getComputedStyle(objname, null).getPropertyValue(stylename);  
	        //return window.getComputedStyle(objname , null)[stylename]; 
	    } 
	} 
	function wheelHandle(e) { 
	    if(e.wheelDelta) { 
	        //document.getElementById('display').innerHTML = (e.wheelDelta > 0 ? '上' : '下'); 
	
	        upcheck = e.wheelDelta >0 ? 1 : 0; 
	        //_wheelDelta += e.wheelDelta/(-40); 
	    } else { 
	        //alert(e.detail); 
	        upcheck = e.detail <0 ? 1 : 0; 
	        //_wheelDelta +=e.detail; 
	    } 
	    showimg(); 
	} 
	
	function showimg(){ 
	    var tmpobj = document.getElementById("showimg"); 
	    var width = parseInt(getStyleValue(tmpobj,'width')); 
	    var height = parseInt(getStyleValue(tmpobj,'height')); 
	    var i = width/height;//    alert(i); 
	    //alert( width + '   ' + height); 
	    /*if(_wheelDelta<0){ 
	        if(width>=0){ 
	            tmpobj.style.height = (width + _wheelDelta*10) + 'px'; 
	            tmpobj.style.width = (height + _wheelDelta*10*i) + 'px'; 
	        } 
	    }else{ 
	        if(width<=1024){ 
	            tmpobj.style.height = (width - _wheelDelta*10) + 'px'; 
	            tmpobj.style.width = (height - _wheelDelta*10*i) + 'px'; 
	        } 
	    }*/ 
	    if(upcheck){ 
	        if(width<=3096){ 
	            tmpobj.style.height = (height + 30) + 'px'; 
	            tmpobj.style.width = (width + 30*i) + 'px'; 
	        } 
	    }else{ 
	        if(width>=35){ 
	            tmpobj.style.height = (height - 30) + 'px'; 
	            tmpobj.style.width = (width - 30*i) + 'px'; 
	        } 
	    } 
	} 
	
	/*var scrollfunc = function(event) { 
	var direct = 0; 
	if (event.wheelDelta) { 
	    alert(wheelDelta); 
	    //direct = event.wheelDelta > 0 ? 1 : -1; 
	} else if (event.detail) { 
	    alert(event.detail); 
	    //direct = event.detail < 0 ? 1 : -1; 
	} 
	}; 
	Event.observe(document, 'mousewheel', scrollfunc); 
	Event.observe(document, 'DOMMouseScroll', scrollfunc);*/ //firefox 

</script> 

<div id="display" style="height:500px;width:650px;margin:0 auto">

		<img src="${staticPath }/scene/areaPic" id="showimg" width="650px" height="500px" ondblclick="orgsize()" style="display:block;margin:auto;cursor:pointer;" />

	</div>  

资源文件下载：https://download.youkuaiyun.com/download/ycs34082419900527/10660939