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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
