JavaScript simple functional simulation ACDSEE

Posted by john

7/13/2007

Related Tags:
css javascript

Simple zoom in and that coordinates functions.
-------------------------------------------

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 ();

ORcts objDivFlag.style.top = [0]. Top;
ORcts objDivFlag.style.left = [0]. Left parseInt (objImg.style.zoom * 10);
ObjDivFlag.style.visibility = "";

)
If (event.button event.srcElement.id == 1 & &! = "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> [0] = oRcts. 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>
</ HEAD>

CSS authoritative guides

[Title]: CSS authoritative guides [Publisher]: China Electric Power Publishing House] [Author: Eric A. Meyer [Evaluation]: ★ ★ ★ ★ ★ ★ ★ ☆ ☆ ☆ [Text:: -------------------------------------------------- ------------------------------------------------...

Color material psychological illusion

The psychological effects of color from the color direct physical stimulation on the direct physiological effects. Many psychologists have done this experiment. They found that the red environment, people will speed up the pulse, blood pressure is elevated, emotiona...

Dreamweaver MX 2004 Video Collection Guide (100)

Set 100: onchange event Curriculum objectives: onchange event grasp of the role and use. Curriculum points: Javascript onchange event When a visitor to change the current object attribute values or produced. General response to the client for the move....

Skills: 12 gold medals animation rules

This 12 animation rules by the Disney animation division accumulated several decades sorted out by the experience of the highest guiding principle, we should But the general bias, as they believe, although Disney animation in the early 1930s, has glowed, However, the original extension of th...

How to achieve similar button hyperlinks under the effect of depression?

Hyperlinks hover state can usually change color, add or remove effects like to underscore remind visitors. We have also seen some text links, boost when the Mouse (hover state) have displacement, similar to the buttons under the effect of depression, and this how? ...

CSS and DIV Web Page Design

Categories

Tags Cloud

Links

Popular Articles

JavaScript simple functional simulation ACDSEE