JavaScript analog ACDSee Simple features
Last Update:2017-02-28
Source: Internet
Author: User
JavaScript is simple to zoom in and zoom out, showing the coordinates function.
-------------------------------------------Demo Code:
---------------------------------------
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> Document </TITLE>
<style type= "Text/css" >
body{
padding:0px;
margin:0px;
Background-color: #999999;}
. Divmain {
Position:absolute;
Text-align:center;
Overflow:hidden;
}
. Divmenu {
Position:absolute;
Text-align:left;
Overflow:hidden;
}
. Imgmain {
Position:absolute;
Overflow:hidden;
border:0px;
}
. Tbmain {
Background-color: #CCCCCC;
padding:0px;
border:0px;
z-index:99;
line-height:18px;
}
. Tbmenu {
Background-color: #FFCCCC;
padding:0px;
border:0px;
z-index:99;
Color: #000000;
}
. Hrscroll {
margin:0px;
Background-color: #FFFFFF;
padding:0px;
border:0px;
z-index:99;
Color: #000000;
border-spacing:0px;
width:160px;
height:10px;
}
</style><script language= "JavaScript" >
<!--var OriginalWidth;
var originalheight; 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"); OriginalWidth = Obj.width;
OriginalHeight = Obj.height; ObjImg.style.width = OriginalWidth;
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 = OriginalWidth;
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);
}function 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 (objcurrent);
}function 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.style.top = 0;
Obj.style.left = 0; Fnwritepos (Obj.style.left,obj.style.top,obj.style.zoom);
}function Fnmousedown (obj) {
Objdrag=obj;
Objdrag.setcapture ();
Objdrag.l=event.x-objdrag.style.pixelleft;
Objdrag.t=event.y-objdrag.style.pixeltop;
}function Fnmousemove () {
if (objdrag!=null) {
ObjDrag.style.left = EVENT.X-OBJDRAG.L;
ObjDrag.style.top = event.y-objdrag.t;
Fnwritepos (Objdrag.style.left,objdrag.style.top,objdrag.style.zoom);
}
}function Fnmouseup () {
if (objdrag!=null) {
Objdrag.releasecapture ();
Objdrag=null;
}
}function fnzoomin () {objImg.style.zoom = parsefloat (objImg.style.zoom) + 0.01;
Fnwritepos (Objimg.style.left,objimg.style.top,objimg.style.zoom);
}function 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);
}
}function Fndivmousedown () {
if (Event.button = = 2 && event.srcElement.id!= "Imgmain") {
ObjDivMenu.style.top = Event.y;
ObjDivMenu.style.left = Event.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 = "hidden";
objDivFlag.style.visibility = "hidden";
}
}function Fnwritepos (intleft,inttop,intzoom) {
Objbtnimginfo.innertext = "Imgleft:" + intleft + "Imgtop:" + inttop + "Imgzoom:" + intzoom;
}function Fnslipmousedown (obj) {
Objdrag=obj;
Objdrag.setcapture ();
OBJDRAG.L = Event.x-objdrag.style.pixelleft;
objdrag.t = ObjDrag.style.pixelTop;
}function Fnslipmousemove () {
if (objdrag!=null) {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);
}
}function Fnslipmouseup () {
if (objdrag!=null) {
Objdrag.releasecapture ();
Objdrag=null;
}
}
function Setdisplay () {if (objImg.style.visibility = = "") {
objImg.style.visibility = "hidden";
}
else{
ObjImg.style.visibility = "";
}
}function Fncontextmenu () {
Window.event.returnvalue=false;
}
-->
</SCRIPT>
<form name= "Fmimgzoom" >
<table id= "Tbmain" class= "Tbmain" >
<TR>
<TD>
<input type= "button" Name= "ZoomIn" value= "ZoomIn" >
<input type= "button" Name= "Zoomout" value= "Zoomout" >
<input type= "button" Name= "Original" value= "Original" >
<input type= "button" Name= "Fitscreen" value= "Fitscreen" >
<input type= "button" Name= "Btnview" value= "Hide/view" >
<input id= "Btnimginfo" size= "M" >
</TD>
</TR>
</TABLE>
<div id= "Divmain" class= "Divmain" >
http://www.dayu88.net/images/22.jpg "Id=" Imgmain "class=" Imgmain "onmousemove=" Fnmousemove () "></div>
<div id= "Divmenu" class= "Divmenu" style= "Visibility:hidden" >
<table class= "Tbmenu" >
<TR>
<TD>10%</TD>
<td><button id= "Hrscroll" class= "Hrscroll" ><TD>1600%</TD>
</TR>
</TABLE>
</div>
<div id= "Divflag" style= "position:absolute;visibility:hidden;width:1px;height:10px;z-index:99" Fnslipmousemove () ">↑</DIV>
</form>
</BODY>
</HTML>