直接上个实例代码吧：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE> Document </TITLE>
<style type="text/css">
body{
margin: 0px
background-color: #999999
}
.DivMain {
position : absolute
text-align : center
overflow : hidden
}
.ImgMain {
position : absolute
overflow : hidden
}
.TBMain {
background-color: #CCCCCC
padding: 0px
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var originalWidth
var originalHeight
var ObjDrag
function setInit(objImg) {
originalWidth = objImg.width
originalHeight = objImg.height
//initImg(objImg)
fmImgZoom.Original.click()
}
function initImg(objCurrent) {
var intBodyWidth
var intBodyHeight
var objTbMain
var objDivMain
//var objImgMain
intBodyWidth = document.body.clientWidth
intBodyHeight = document.body.clientHeight
objTbMain = document.getElementById("tbMain")
objDivMain = document.getElementById("divMain")
//objImgMain = document.getElementById("imgMain")
objTbMain.top = 0
objTbMain.height = 20
objTbMain.width = intBodyWidth
objDivMain.top = 20
objDivMain.left = 0
objDivMain.height = intBodyHeight - 20
objDivMain.width = intBodyWidth
initZoom(objCurrent)
}
function initZoom(obj){
var intObjWidth
var intObjHeight
var intDivHeight
var intZoomRatio
var objDivMain
var objTbMain
objDivMain = document.getElementById("DivMain")
objTbMain = document.getElementById("tbMain")
intDivHeight = objDivMain.height
intObjHeight = obj.height
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 setFitScreen() {
var objImg
objImg = document.getElementById("imgMain")
initImg(objImg)
}
function setOriginal() {
var objImg
var objDivMain
var intBodyWidth
var intBodyHeight
intBodyWidth = document.body.clientWidth
intBodyHeight = document.body.clientHeight
objImg = document.getElementById("imgMain")
objDivMain = document.getElementById("divMain")
objImg.style.left = 0
objImg.style.top = 0
objImg.width = originalWidth
objImg.height = originalHeight
objImg.style.zoom = 1
objDivMain.style.width = intBodyWidth
objDivMain.style.height = intBodyHeight - 20
fnWritePos(objImg.style.left,objImg.style.top,objImg.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 fnWritePos(intLeft,intTop,intZoom) {
var objbtnImgInfo
objbtnImgInfo = document.getElementById("btnImgInfo")
objbtnImgInfo.innerText = " ImgLeft:" + intLeft + " ImgTop:" + intTop + " ImgZoom:" + intZoom
}
function fnZoomIn() {
var objImg
objImg = document.getElementById("imgMain")
objImg.style.zoom = parseFloat(objImg.style.zoom) + 0.01
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom)
}
function fnZoomOut() {
var objImg
objImg = document.getElementById("imgMain")
objImg.style.zoom = parseFloat(objImg.style.zoom) - 0.01
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom)
}
function fnContextMenu() {
window.event.returnValue=false
}
function fnDivMouseDown() {
if ( event.button == 2 && event.srcElement.id != "imgMain") {
setOriginal()
}
}
function setDisplay() {
var objImg
objImg = document.getElementById("imgMain")
if(objImg.style.visibility == ""){
objImg.style.visibility = "hidden"
}
else{
objImg.style.visibility = ""
}
}
//-->
</SCRIPT>
</HEAD>
<BODY oncontextmenu="fnContextMenu()">
<form name="fmImgZoom">
<TABLE id="tbMain" class="TBMain">
<TR>
<TD height="20">
<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="FitScreen" value="hide/view" onclick="setDisplay()">
<input id="btnImgInfo" size="50">
</TD>
</TR>
</TABLE>
<div id="divMain" class="DivMain" onmousedown="fnDivMouseDown()"><img src="22.jpg" id="imgMain" class="imgMain" onload="setInit(this)" onmousedown="fnMouseDown(this)" onmousemove="fnMouseMove()" onmouseup="fnMouseUp()" ></div>
</form>
</BODY>
</HTML>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）