我要投稿
  • 您当前的位置:57365.com -> 技术教程 -> 网站建设教程 -> DOMJS教程 -> 教程内容
  • [ 收藏本页教程 ]
  • javascript模拟ACDSEE简单功能DOMJS教程

    教程作者:佚名    教程来源:不详   教程栏目:DOMJS教程    收藏本页
     

    简单的放大缩小,显示坐标功能。
    -------------------------------------
    演示代码:
    -------------------------------------
    <!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&

    我要投稿   -   广告合作   -   关于本站   -   友情连接   -   网站地图   -   联系我们   -   版权声明   -   设为首页   -   加入收藏   -   网站留言
    Copyright © 2009 - 20012 www.www.hxswjs.com All Rights Reserved.57365.com 版权所有