JS：
var nn6 = document.getElementById && !document.all; var isDrag = false; var ojDrag; var x, y;var div, img, divOriginal, imgOriginal;
function initImageViewer(divShow, imgShow, divHide, imgHide) { div = divShow, img = imgShow, divOriginal = divHide, imgOriginal = imgHide; img.onmousewheel = function () { var zoom = parseInt(img.style.zoom, 10) || 100; zoom += event.wheelDelta / 12; if (zoom > 0) img.style.zoom = zoom + '%'; return false; } }function moveMouse(e) {
if (isDrag) { ojDrag.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px"; ojDrag.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px"; return false; } }function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement; var topElement = "HTML"; while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") { oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; } if (oDragHandle.className == "dragAble") { isDrag = true; ojDrag = oDragHandle; nTY = parseInt(ojDrag.style.top + 0); y = nn6 ? e.clientY : event.clientY; nTX = parseInt(ojDrag.style.left + 0); x = nn6 ? e.clientX : event.clientX; document.onmousemove = moveMouse; return false; } }document.onmousedown = initDrag;
document.onmouseup = new Function("isDrag=false");function clickMove(s) {
if (s == "up") { dragObj.style.top = (parseInt(dragObj.style.top) + 50) + "px"; } else if (s == "down") { dragObj.style.top = (parseInt(dragObj.style.top) - 50) + "px"; } else if (s == "left") { dragObj.style.left = (parseInt(dragObj.style.left) + 50) + "px"; } else if (s == "right") { dragObj.style.left = (parseInt(dragObj.style.left) - 50) + "px"; } } function zoomIn() { var w = img.width; var h = img.height; img.width = w * 1.2; img.height = h * 1.2; } function zoomOut() { var w = img.width; var h = img.height; img.width = w / 1.2; img.height = h / 1.2; } function zoomFull() { img.width = imgOriginal.width; img.height = imgOriginal.height; div.style.top = divOriginal.style.top; div.style.left = divOriginal.style.left; }HTML:
<script type="text/javascript">
$(function(){ $("#tt").tree({ url:'/business/change/listTree?id=11', onLoadSuccess: function (node, data) { $("#image1").attr("src",data[0].attributes.url); $("#image2").attr("src",data[0].attributes.url); /* 模拟移动 */ dragObj=block1; drag=1; /* 模拟结束 */ initImageViewer(document.getElementById("block1"),document.getElementById("image1"),document.getElementById("block2"),document.getElementById("image2")); }, onClick: function(node){ $("#image1").attr("src",node.attributes.url); $("#image2").attr("src",node.attributes.url); }});
}) </script> </head> <body class="easyui-layout"> <div data-options="region:'west'" title="附件列表" style="width: 15%;"> <ul id="tt"></ul> </div> <div data-options="region:'center'" title="图片查看"> <table class="imgViewerNav" border="0" cellspacing="2" cellpadding="0"> <tr> <td colspan="3" align="center"> <img src="${BASE_PATH}/Themes/Default/images/business/up.gif" οnclick="clickMove('down');" alt="向上" /> </td> </tr> <tr> <td> <img src="${BASE_PATH}/Themes/Default/images/business/left.gif" οnclick="clickMove('right');" alt="向左" /> </td> <td> <img src="${BASE_PATH}/Themes/Default/images/business/zoom.gif" οnclick="zoomFull();" alt="还原" /> </td> <td> <img src="${BASE_PATH}/Themes/Default/images/business/right.gif" οnclick="clickMove('left');" alt="向右" /> </td> </tr> <tr> <td colspan="3" align="center"> <img src="${BASE_PATH}/Themes/Default/images/business/down.gif" οnclick="clickMove('up');" alt="向下" /> </td> </tr> <tr> <td colspan="3" align="center"> <img src="${BASE_PATH}/Themes/Default/images/business/zoom_in.gif" οnclick="zoomIn();" alt="放大" /> </td> </tr> <tr> <td colspan="3" align="center"> <img src="${BASE_PATH}/Themes/Default/images/business/zoom_out.gif" οnclick="zoomOut();" alt="缩小" /> </td> </tr> </table> <div id="block1" style="position: absolute; top: 100px; left: 200px; width: 0px; height: 0px; z-index: 10;" class="dragAble" οnmοuseοut="drag=0" οnmοuseοver="dragObj=block1;drag=1;"> <img name="image1" id="image1" src="" border="0" alt="" /> </div> <div id="block2" style="position: absolute; top: 100px; left: 200px; width: 0px; height: 0px; z-index: 1; visibility: hidden;"> <img name="image2" id="image2" src="" border="0" alt="" /> </div> </div> </body> </html>