[原创]JavaScript模拟ACDSEE简单功能

王朝html/css/js·作者佚名  2006-01-10
窄屏简体版  字體: 小|中|大|超大  

简单的放大缩小，显示坐标功能。

--------------------------------------------------------------------------

演示代码：

--------------------------------------------------------------------------

<!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>

</HEAD>

<BODY oncontextmenu="fnContextMenu()">

<form name="fmImgZoom">

<TABLE id="tbMain" class="TBMain">

<TR>

<TD>

<input type="button" name="ZoomIn" value="ZoomIn" onclick="fnZoomIn()">

<input type="button" name="ZoomOut" value="ZoomOut" onclick="fnZoomOut()">

<input type="button" name="Original" value="Original" onclick="setOriginal()">

<input type="button" name="FitScreen" value="FitScreen" onclick="setFitScreen()">

<input type="button" name="btnView" value="hide/view" onclick="setDisplay()">

<input id="btnImgInfo" size="50">

</TD>

</TR>

</TABLE>

<div id="divMain" class="DivMain" onmousedown="fnDivMouseDown()"><img src="http://www.dayu88.net/images/22.jpg" id="imgMain" class="imgMain" onload="setInit(this)" onmousedown="fnMouseDown(this)" onmousemove="fnMouseMove()" onmouseup="fnMouseUp()" ></div>

<div id="divMenu" class="DivMenu" style="visibility:hidden">

<TABLE class="TBMenu">

<TR>

<TD>10%</TD>

<TD><button id="HrScroll" class="HrScroll"><hr noshade></button> </TD>

<TD>1600%</TD>

</TR>

</TABLE>

</div>

<DIV ID="DivFlag" STYLE="position:absolute;visibility:hidden;width:1px;height:10px;z-index:99" onmousedown="fnSlipMouseDown(this)" onmousemove="fnSlipMouseMove()" onmouseup="fnSlipMouseUp()" onmouseover="this.style.cursor ='hand'" onmouseout="this.style.cursor=''">↑</DIV>

</form>

</BODY>

</HTML>

 
 
 
免责声明：本文为网络用户发布，其观点仅代表作者个人观点，与本站无关，本站仅提供信息存储服务。文中陈述内容未经本站证实，其真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航