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.csdn.net/download/ycs34082419900527/10660939

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

前端图片拖拽，滚轮放大缩小
拖拽 var offX = 0,offY = 0; onMouseDown(ev) {var svgId = document.getElementById("svgId");sv ...
前端实现图片查看器（滚轮放大，缩小，旋转）——Viewer.js
一.前端实现图片查看器(放大,缩小,旋转)--Viewer.js [附参考链接:(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客] 1.0 J ...
Jquery鼠标滚轮放大缩小图片
使用Jquery鼠标点击图片,划动鼠标滚轮放大缩小图片. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
鼠标滚轮放大缩小图片
js实现鼠标滚轮放大缩小图片 <script> //放大缩小图片 function sdZoom(o) { var zoom=parseInt(o.styl ...
鼠标滚轮放大/缩小图片
<img id=pic src=" http://community.csdn.net/images/CSDN_logo.GIF" width=105 height=31 b ...
C#制作一个图片查看器，具有滚轮放大缩小，鼠标拖动，图像像素化，显示颜色RGB信息功能
目录前言一.界面设计二.关键技术 1.把图片拖入到窗体并显示 2.实现图像缩放的功能 3.实现图像的移动效果 4.实时显示当前鼠标处的RGB值 5. 右击功能的实现 6.效果展示总结前言使 ...
javascript实现对图片的随意拖拽,放大缩小
[JS]基于javascript实现对图片的随意拖拽,放大缩小最近写项目的过程中需要对图片进行一个操作,点击之后弹出图片,在可定div范围内对图片进行任意拖拽位置和鼠标滚动时对其放大缩小,双击图片恢 ...
移动端图片单指移动,双指放大缩小实现//touchmove的时候不让body滚动
移动端图片单指移动,双指放大缩小实现//touchmove的时候不让body滚动思路1:移动放大缩小操作都直接放到图片上面图片的放大缩小使用transform的scale属性操作,移动使用tran ...
echart 地图添加了滚轮放大缩小导致二级地图无法居中问题
echart 地图添加了滚轮放大缩小导致二级地图无法居中问题由于地图有鼠标拖动移动,滚轮放大缩小的需求.添加了以下代码 geo: {map: 'china',type: "map" ...

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

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

最新文章

热门文章