点击图片查看该图，如果不够清晰可以放大，如果感觉位置不对还可以拖动，当然了，做的还不太好，给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>
可移动，可放大的图片查看功能