<html>
<head>
<meta http
equiv="Content
Type" content="text/html; charset=gb
">
<title>網頁特效觀止|www
jscode
cn|
給地圖加個放大鏡</title>
<SCRIPT>
var shrinkfactor=
// left and top position of the thumbnailimage
// (distance to the left and top browser
margin
pixels)
var thumbleft =
var thumbtop =
// left and top position of the zoomed image
// (distance to the left and top browser
margin
pixels)
var largeleft =
var largetop =
// width and height of the enlarged image
s sector (visible part
pixels)
var clipwidth =
var clipheight =
</SCRIPT>
<SCRIPT>
var isNav
isIE
var offsetX
offsetY
var selectedObj
var largewidth =
var largeheight =
var thumbwidth = Math
floor(largewidth/shrinkfactor)
var thumbheight = Math
floor(largeheight/shrinkfactor)
var dragimgwidth = Math
floor(clipwidth/shrinkfactor)
var dragimgheight = Math
floor(clipheight/shrinkfactor)
var dragimgleft = thumbleft+
var dragimgtop = thumbtop+
var difleft= largeleft
thumbleft
var diftop= largetop
thumbtop
var clippoints
var cliptop=
var clipbottom=cliptop+clipheight
var clipleft=
var clipright=clipleft+clipwidth
if (parseInt(navigator
appVersion) >=
) {
if (navigator
appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}
function setZIndex(obj
zOrder) {
obj
zIndex = zOrder
}
function shiftTo(obj
x
y) {
if (isNav) {
if(x<=document
thumb
left) {x=document
thumb
left}
if(x>=(document
thumb
left+thumbwidth
dragimgwidth
)) {x=document
thumb
left+thumbwidth
dragimgwidth
}
if(y<=document
thumb
top) {y=document
thumb
top}
if(y>=(document
thumb
top+thumbheight
dragimgheight
)) {y=document
thumb
top+thumbheight
dragimgheight
}
obj
moveTo(x
y)
} else {
if(x<=document
all
thumb
style
posLeft) {x=document
all
thumb
style
posLeft}
if(x>=(document
all
thumb
style
posLeft+thumbwidth
dragimgwidth
)) {x=document
all
thumb
style
posLeft+thumbwidth
dragimgwidth
}
if(y<=document
all
thumb
style
posTop) {y=document
all
thumb
style
posTop}
if(y>=(document
all
thumb
style
posTop+thumbheight
dragimgheight
)) {y=document
all
thumb
style
posTop+thumbheight
dragimgheight
}
obj
pixelLeft = x
obj
pixelTop = y
}
cliptop = (y
thumbtop)*shrinkfactor
clipbottom = cliptop+clipheight
clipleft = (x
thumbleft)*shrinkfactor
clipright = clipleft+clipwidth
if (document
all) {
clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document
all
large
style
posTop=largetop
cliptop
document
all
large
style
posLeft=largeleft
clipleft
document
all
large
style
clip=clippoints
}
if (document
layers) {
document
large
top=largetop
cliptop
document
large
left=largeleft
clipleft
document
large
clip
left = clipleft
document
large
clip
right = clipright
document
large
clip
top = cliptop
document
large
clip
bottom = clipbottom
}
}
function setSelectedElem(evt) {
if (isNav) {
var testObj
var clickX = evt
pageX
var clickY = evt
pageY
for (var i = document
layers
length
; i >=
; i
) {
testObj = document
layers[i]
if ((clickX > testObj
left) &&
(clickX < testObj
left + testObj
clip
width) &&
(clickY > testObj
top) &&
(clickY < testObj
top + testObj
clip
height && document
layers[i]
id=="dragimg")) {
selectedObj = testObj
setZIndex(selectedObj
)
return
}
}
} else {
var imgObj = window
event
srcElement
if (imgObj
parentElement
id
indexOf("dragimg") !=
) {
selectedObj = imgObj
parentElement
style
setZIndex(selectedObj
)
return
}
}
selectedObj = null
return
}
function dragIt(evt) {
if (selectedObj) {
if (isNav) {
shiftTo(selectedObj
(evt
pageX
offsetX)
(evt
pageY
offsetY))
} else {
shiftTo(selectedObj
(window
event
clientX
offsetX)
(window
event
clientY
offsetY))
return false
}
}
}
function engage(evt) {
setSelectedElem(evt)
if (selectedObj) {
if (isNav) {
offsetX = evt
pageX
selectedObj
left
offsetY = evt
pageY
selectedObj
top
} else {
offsetX = window
event
offsetX
offsetY = window
event
offsetY
}
}
return false
}
function release(evt) {
if (selectedObj) {
setZIndex(selectedObj
)
selectedObj = null
}
}
function setNavEventCapture() {
if (isNav) {
document
captureEvents(Event
MOUSEDOWN | Event
MOUSEMOVE | Event
MOUSEUP)
}
}
function init() {
if (document
layers) {
var imageurl=document
large
document
largepic
src
largewidth=document
large
document
width
largeheight=document
large
document
height
thumbwidth = Math
floor(largewidth/shrinkfactor)
thumbheight = Math
floor(largeheight/shrinkfactor)
document
thumb
document
write("<IMG NAME=
thumbpic
SRC=
"+imageurl+"
width="+thumbwidth+" height="+thumbheight+">")
document
thumb
document
close()
document
dragimg
document
write("<IMG NAME=
dragimgpic
border=
SRC=
dragimg
gif
width="+dragimgwidth+" height="+dragimgheight+">")
document
dragimg
document
close()
document
large
left=largeleft
document
large
top=largetop
document
thumb
left=thumbleft
document
thumb
top=thumbtop
document
dragimg
left=dragimgleft
document
dragimg
top=dragimgtop
document
large
clip
left=clipleft
document
large
clip
right=clipright
document
large
clip
top=cliptop
document
large
clip
bottom=clipbottom
document
large
visibility="visible"
setNavEventCapture()
}
if (document
all) {
var imageurl=document
largepic
src
largewidth=document
all
large
offsetWidth
largeheight=document
all
large
offsetHeight
thumbwidth = Math
floor(largewidth/shrinkfactor)
thumbheight = Math
floor(largeheight/shrinkfactor)
thumb
innerHTML="<IMG NAME=
thumbpic
SRC=
"+imageurl+"
width="+thumbwidth+" height="+thumbheight+">"
dragimg
innerHTML="<IMG NAME=
dragimgpic
border=
SRC=
width="+dragimgwidth+" height="+dragimgheight+">"
document
all
large
style
posLeft=largeleft
document
all
large
style
posTop=largetop
document
all
thumb
style
posLeft=thumbleft
document
all
thumb
style
posTop=thumbtop
document
all
dragimg
style
posLeft=dragimgleft
document
all
dragimg
style
posTop=dragimgtop
clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document
all
large
style
clip=clippoints
document
all
large
style
visibility="visible"
}
document
onmousedown = engage
document
onmousemove = dragIt
document
onmouseup = release
}
window
onload=init
</SCRIPT></head>
<body>
<p>用鼠標移動下面的方框
效果不錯吧</p>
<center>
<DIV style="position:absolute;visibility:hidden;" ID="large"><IMG NAME="largepic" SRC="
<DIV style="position:absolute;" ID="thumb"></DIV>
<DIV style="position:absolute;" ID="dragimg"></DIV></center>
</body>
</html>
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20361.html
