JavaScript simula funções simples ACDSEE

Autor：Eve Cole Data da Última Atualização：2024-11-06 09:18:58

简单的放大缩小,显示坐标功能。
-------------------------------------
演示代码:
-------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<CABEÇA>
<TITLE> Documento </TITLE>
<style type="texto/css">
corpo{
preenchimento: 0px;
margem: 0px;
cor de fundo: #999999;
}
.DivPrincipal {
posição: absoluta;
alinhamento de texto: centro;
estouro: oculto;
}
.DivMenu {
posição: absoluta;
alinhamento de texto: esquerda;
estouro: oculto;
}
.ImgPrincipal {
posição: absoluta;
estouro: oculto;
borda: 0px;
}
.TBPrincipal {
cor de fundo: #CCCCCC;
preenchimento: 0px;
borda: 0px;
índice z: 99;
altura da linha: 18px;

}
.TBMenu {
cor de fundo: #FFCCCC;
preenchimento: 0px;
borda: 0px;
índice z: 99;
cor: #000000;

}
.HrScroll {
margem: 0px;
cor de fundo: #FFFFFF;
preenchimento: 0px;
borda: 0px;
índice z: 99;
cor: #000000;
espaçamento de borda: 0px;
largura: 160px;
altura: 10px;
}
</estilo>
<SCRIPT LANGUAGE="JavaScript">
<!--
var largura original;
var altura original;
var objDivMain;
var objTbMain;
var objImg;
var ObjDrag ;
var objDivMenu;
var objTbMemu ;
var objbtnImgInfo ;
var objDivFlag;
var objHrScroll;
var oRcts;
var oTextRange;
function setInit(obj) {
objDivMain = document.getElementById("divMain") ;
objTbMain = document.getElementById("TbMain") ;
objDivMenu = document.getElementById("DivMenu") ;
objTbMenu = document.getElementById("TbMenu") ;
objImg = document.getElementById("imgMain") ;
objbtnImgInfo = document.getElementById("btnImgInfo") ;

objDivFlag = document.getElementById("DivFlag");
objHrScroll = document.getElementById("HrScroll");
largura original = obj.largura;
altura original = obj.altura;
objImg.style.width = largura original;
objImg.style.height = originalHeight;
fmImgZoom.FitScreen.click();
}
function setFitScreen() {
initImg(objImg);
}
function setOriginal() {
var intBodyWidth;
var intBodyHeight;
intBodyWidth = document.body.clientWidth;
intBodyHeight = document.body.clientHeight;
objImg.style.left = 0;
objImg.style.top = 0;
objImg.style.width = largura original;
objImg.style.height = originalHeight;
objImg.style.zoom = 1;
objDivMain.style.width = intBodyWidth;
objDivMain.style.height = intBodyHeight - objTbMain.clientHeight;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}
função initImg(objCurrent) {
var intBodyWidth;
var intBodyHeight;
intBodyWidth = document.body.clientWidth;
intBodyHeight = document.body.clientHeight;

objTbMain.style.top = 0;
objTbMain.style.height = 20;
objTbMain.style.width = intBodyWidth;

objDivMain.style.left = 0;
objDivMain.style.height = intBodyHeight - objTbMain.clientHeight;
objDivMain.style.width = intBodyWidth;
initZoom(objAtual);
}
função initZoom(obj){
var intObjWidth;
var intObjHeight;
var intDivHeight;
var intZoomRatio;

intDivHeight = objDivMain.style.pixelHeight;
intObjHeight = obj.style.pixelHeight;
intZoomRatio = intDivHeight / intObjHeight;
obj.style.zoom = intZoomRatio;
obj.estilo.top = 0;
obj.estilo.esquerda = 0;
fnWritePos (obj.style.left,obj.style.top,obj.style.zoom);
}
função fnMouseDown(obj) {
ObjDrag=obj;
ObjDrag.setCapture();
ObjDrag.l=event.x-ObjDrag.style.pixelLeft;
ObjDrag.t=event.y-ObjDrag.style.pixelTop;
}
função fnMouseMove() {
if(ObjDrag!=nulo) {
ObjDrag.style.left = event.x-ObjDrag.l;
ObjDrag.style.top = event.y-ObjDrag.t;
fnWritePos(ObjDrag.style.left,ObjDrag.style.top,ObjDrag.style.zoom);
}
}
função fnMouseUp() {
if(ObjDrag!=nulo) {
ObjDrag.releaseCapture();
ObjDrag=null;
}
}
função fnZoomIn() {
objImg.style.zoom = parseFloat(objImg.style.zoom) + 0,01;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}
função fnZoomOut() {
if(objImg.style.zoom>0,01){
objImg.style.zoom = parseFloat(objImg.style.zoom) - 0,01;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}
}
função fnDivMouseDown() {
if ( event.button == 2 && event.srcElement.id != "imgMain") {
objDivMenu.style.top = evento.y;
objDivMenu.style.left=evento.x;
objDivMenu.style.visibility = "";
oTextRange = objHrScroll.createTextRange();
oRcts = oTextRange.getClientRects();
oBndRct = objDivFlag.getBoundingClientRect();

objDivFlag.style.top = oRcts[0].top;
objDivFlag.style.left = oRcts[0].left + parseInt(objImg.style.zoom * 10) ;
objDivFlag.style.visibility = "";
}
if ( event.button == 1 && event.srcElement.id != "imgMain") {
objDivMenu.style.visibility = "oculto";
objDivFlag.style.visibility = "oculto";
}
}
função fnWritePos(intLeft,intTop,intZoom) {
objbtnImgInfo.innerText = " ImgLeft:" + intLeft + " ImgTop:" + intTop + " ImgZoom:" + intZoom ;
}
função fnSlipMouseDown(obj) {
ObjDrag=obj;
ObjDrag.setCapture();
ObjDrag.l = event.x - ObjDrag.style.pixelLeft;
ObjDrag.t = ObjDrag.style.pixelTop;
}
função fnSlipMouseMove() {
if(ObjDrag!=nulo) {
if(event.x >= oRcts[0].left && event.x <= oRcts[0].right ){
ObjDrag.style.left = event.x - objDivFlag.offsetWidth / 2;
}
ObjDrag.t = ObjDrag.style.pixelTop;
var intCurrentPos = ObjDrag.style.pixelLeft - oRcts[0].left + objDivFlag.offsetWidth / 2;
var intPicZoom = intCurrentPos/10;
objImg.style.zoom = intPicZoom;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}
}
função fnSlipMouseUp() {
if(ObjDrag!=nulo) {
ObjDrag.releaseCapture();
ObjDrag=null;
}
}