点击图片查看该图，如果不够清晰可以放大，如果感觉位置不对还可以拖动，当然了，做的还不太好，给ps的放大功能差远了。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> * { margin:0; padding:0;} .cont { width:450px;} .cont img { width:100%; height:auto;} .mask { position: fixed; height: 100%; width: 100%; background-color:rgba(0,0,0,.2); top:0; left:0px; display:none; } .cont_son { width:450px; position:absolute; left:50%; top:50%; margin-left:-225px; margin-top:-100px; background:#fff; padding:10px; } .cont_son h3 { font-size:14px; font-weight:normal; text-indent:10px; color:#333; background-color:#ddd; line-height:30px;} .mask_img img { height:auto;} .close { width:20px; height:20px; position:absolute; right:15px; top:15px; cursor:pointer;} </style> </head> <body> <div class="cont" id="cont"><img src="test001.jpg" width="1440" height="900" /></div> <div class="mask" id="selt" ondrop="drop(event)" ondragover="allowDrop(event)"> <div class="cont_son" draggable="true" ondragstart="drag(event)" > <h3 >滚动滚轮放大缩小图片</h3> <div class="close" id="close">×</div> <div class="mask_img" > </div> </div> </div> <script> var cont = document.getElementById("cont"); var selt = document.getElementById("selt"); var kuang = selt.getElementsByClassName("cont_son")[0]; cont.addEventListener("click",show); function show (){ var maskImg = selt.getElementsByClassName("mask_img")[0]; var oldImg = cont.getElementsByTagName("img")[0]; var hasImg = maskImg.getElementsByTagName("img")[0]; if(!hasImg){ var newImg = oldImg.cloneNode(true); newImg.width = 450; maskImg.appendChild(newImg); }else { kuang.removeAttribute("style"); hasImg.style.width = "450px"; } selt.style.display = "block "; window.addEventListener("mousewheel",panduan); } var guanbi = document.getElementById("close"); guanbi.addEventListener("click",hide); function hide (){ selt.style.display = "none "; } function panduan (e){ var t1; if(e.wheelDelta){//IE/Opera/Chrome t1 = e.wheelDelta; }else if(e.detail){//Firefox t1 =e.detail; } if(t1>0){ scale(1); } else { scale(0); } nowx =e.clientX ; nowy =e.clientY ; } function scale(isUp){ var width = kuang.offsetWidth-20; var height = kuang.offsetHeight-20; var left = kuang.offsetLeft; var top = kuang.offsetTop; var ml = parseFloat(getCurrentStyle(kuang).marginLeft); var mh = parseFloat(getCurrentStyle(kuang).marginTop); if(isUp){ var Nwidth = width*1.1; var Nheight = height*1.1; }else { var Nwidth = width/1.1; var Nheight = height/1.1; } kuang.style.width = Nwidth+"px"; kuang.style.marginLeft = (ml-(Nwidth-width)/2) +"px"; kuang.style.marginTop = (mh-(Nheight-height)/2) +"px"; var nowImg = kuang.querySelector(".mask_img img"); nowImg.style.width = "100%"; //console.log(height) ; } var nowx , nowy ; function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ var dragId = kuang; var yuanX = kuang.offsetLeft ; var yuanY = kuang.offsetTop ; nowx =ev.clientX ; nowy =ev.clientY ; nowx = nowx - yuanX ; nowy = nowy - yuanY; ev.dataTransfer.setData("Text",dragId); ev.dataTransfer.setDragImage(kuang,nowx,nowy); } function drop(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); var dX = ev.clientX -nowx; var dY = ev.clientY -nowy ; var ele = kuang; ele.style.left = dX +"px"; ele.style.top = dY +"px"; ele.style.marginLeft= "0px"; ele.style.marginTop = "0px"; } // 参数node：将要获取其计算样式的元素节点 function getCurrentStyle(node) { var style = null; if(window.getComputedStyle) { style = window.getComputedStyle(node, null); }else{ style = node.currentStyle; } return style; } </script> </body> </html>