记录一款好用的JS，以后好自己用
2017-03-23 00:00
211 查看
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" onclick="clickMove('down');" alt="向上" />
</td>
</tr>
<tr>
<td>
<img src="${BASE_PATH}/Themes/Default/images/business/left.gif" onclick="clickMove('right');" alt="向左" />
</td>
<td>
<img src="${BASE_PATH}/Themes/Default/images/business/zoom.gif" onclick="zoomFull();" alt="还原" />
</td>
<td>
<img src="${BASE_PATH}/Themes/Default/images/business/right.gif" onclick="clickMove('left');" alt="向右" />
</td>
</tr>
<tr>
<td colspan="3" align="center">
<img src="${BASE_PATH}/Themes/Default/images/business/down.gif" onclick="clickMove('up');" alt="向下" />
</td>
</tr>
<tr>
<td colspan="3" align="center">
<img src="${BASE_PATH}/Themes/Default/images/business/zoom_in.gif" onclick="zoomIn();" alt="放大" />
</td>
</tr>
<tr>
<td colspan="3" align="center">
<img src="${BASE_PATH}/Themes/Default/images/business/zoom_out.gif" onclick="zoomOut();" alt="缩小" />
</td>
</tr>
</table>
<div id="block1" style="position: absolute; top: 100px; left: 200px; width: 0px; height: 0px;
z-index: 10;" class="dragAble" onmouseout="drag=0" onmouseover="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>
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" onclick="clickMove('down');" alt="向上" />
</td>
</tr>
<tr>
<td>
<img src="${BASE_PATH}/Themes/Default/images/business/left.gif" onclick="clickMove('right');" alt="向左" />
</td>
<td>
<img src="${BASE_PATH}/Themes/Default/images/business/zoom.gif" onclick="zoomFull();" alt="还原" />
</td>
<td>
<img src="${BASE_PATH}/Themes/Default/images/business/right.gif" onclick="clickMove('left');" alt="向右" />
</td>
</tr>
<tr>
<td colspan="3" align="center">
<img src="${BASE_PATH}/Themes/Default/images/business/down.gif" onclick="clickMove('up');" alt="向下" />
</td>
</tr>
<tr>
<td colspan="3" align="center">
<img src="${BASE_PATH}/Themes/Default/images/business/zoom_in.gif" onclick="zoomIn();" alt="放大" />
</td>
</tr>
<tr>
<td colspan="3" align="center">
<img src="${BASE_PATH}/Themes/Default/images/business/zoom_out.gif" onclick="zoomOut();" alt="缩小" />
</td>
</tr>
</table>
<div id="block1" style="position: absolute; top: 100px; left: 200px; width: 0px; height: 0px;
z-index: 10;" class="dragAble" onmouseout="drag=0" onmouseover="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 记录一款好用的JS插件，artDialog中国人自己写的插件
- 以后要好好用这个博客把自己的东西记录下来
- 记录一下懒惰的自己，以后别犯这种错了
- 以后会在这里记录自己的做题历程
- 记录一款不错的插件fullpage.js
- 关于orcale的数据库脚本，记录下来，方便自己以后用到查找
- 走上软件之路，以后就在这里记录自己的学习过程了(2007.12.18笔记)
- 如何自己开发一款js或者jquery插件
- 记录一些js 自己得盲点
- 现在才认识的博客对自己的作用，以后好好利用，记录自己成长的过程，和学习的点滴
- 如何自己开发一款js或者jquery插件
- 以后开始写博，记录自己成长的点滴。
- 先记录一下自己最近的积累吧(XSL+XML导出及JS对XML的操作)
- 12-7 脚本流程协助类， 自己记录，以后再重构。
- 知识点要做好记录，方便以后自己查阅
- SqlServer2005 分页语句，自己简单测试了，感觉速度很快，就记录下来了，便于以后学习。
- 【荐】自己做一款不错的JS+CSS多级导航菜单
- 记录一个自己常用的JS 分页 + 渲染脚本
- 实习三个月整，记录自己的成长，主要是保留一些这段时间学习flex的链接，方便以后查看
- 第一次写博客，想记录一下自己脱离新手村以后的升级过程