熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

給地圖找個放大鏡

2013-11-15 12:07:50  來源: JSP教程 

  <html>

<head> <meta httpequiv="ContentType" content="text/html; charset=gb"> <title>網頁特效觀止|wwwjscodecn| 給地圖加個放大鏡</title> <SCRIPT>   var shrinkfactor=   // left and top position of the thumbnailimage  // (distance to the left and top browsermargin pixels) var thumbleft = var thumbtop =   // left and top position of the zoomed image  // (distance to the left and top browsermargin pixels) var largeleft = var largetop =   // width and height of the enlarged images sector (visible part pixels) var clipwidth = var clipheight = </SCRIPT> <SCRIPT>   var isNav isIE var offsetX offsetY var selectedObj    var largewidth = var largeheight =   var thumbwidth = Mathfloor(largewidth/shrinkfactor) var thumbheight = Mathfloor(largeheight/shrinkfactor)   var dragimgwidth = Mathfloor(clipwidth/shrinkfactor) var dragimgheight = Mathfloor(clipheight/shrinkfactor) var dragimgleft = thumbleft+ var dragimgtop = thumbtop+   var difleft= largeleftthumbleft var diftop= largetopthumbtop   var clippoints   var cliptop= var clipbottom=cliptop+clipheight var clipleft= var clipright=clipleft+clipwidth     if (parseInt(navigatorappVersion) >= ) { if (navigatorappName == "Netscape") { isNav = true } else { isIE = true } }   function setZIndex(obj zOrder) { objzIndex = zOrder }   function shiftTo(obj x y) { if (isNav) {         if(x<=documentthumbleft) {x=documentthumbleft} if(x>=(documentthumbleft+thumbwidthdragimgwidth)) {x=documentthumbleft+thumbwidthdragimgwidth} if(y<=documentthumbtop) {y=documentthumbtop} if(y>=(documentthumbtop+thumbheightdragimgheight)) {y=documentthumbtop+thumbheightdragimgheight} objmoveTo(xy) } else { if(x<=documentallthumbstyleposLeft) {x=documentallthumbstyleposLeft} if(x>=(documentallthumbstyleposLeft+thumbwidthdragimgwidth)) {x=documentallthumbstyleposLeft+thumbwidthdragimgwidth} if(y<=documentallthumbstyleposTop) {y=documentallthumbstyleposTop} if(y>=(documentallthumbstyleposTop+thumbheightdragimgheight)) {y=documentallthumbstyleposTop+thumbheightdragimgheight} objpixelLeft = x objpixelTop = y } cliptop = (ythumbtop)*shrinkfactor clipbottom = cliptop+clipheight clipleft = (xthumbleft)*shrinkfactor clipright = clipleft+clipwidth     if (documentall) { clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" documentalllargestyleposTop=largetopcliptop documentalllargestyleposLeft=largeleftclipleft documentalllargestyleclip=clippoints } if (documentlayers) { documentlargetop=largetopcliptop documentlargeleft=largeleftclipleft documentlargeclipleft = clipleft documentlargeclipright = clipright documentlargecliptop = cliptop documentlargeclipbottom = clipbottom } }   function setSelectedElem(evt) { if (isNav) { var testObj var clickX = evtpageX var clickY = evtpageY for (var i = documentlayerslength ; i >= ; i) { testObj = documentlayers[i] if ((clickX > testObjleft) &&  (clickX < testObjleft + testObjclipwidth) &&  (clickY > testObjtop) &&  (clickY < testObjtop + testObjclipheight && documentlayers[i]id=="dragimg")) { selectedObj = testObj setZIndex(selectedObj ) return } } } else { var imgObj = windoweventsrcElement if (imgObjparentElementidindexOf("dragimg") != ) { selectedObj = imgObjparentElementstyle setZIndex(selectedObj) return } } selectedObj = null return }   function dragIt(evt) { if (selectedObj) { if (isNav) { shiftTo(selectedObj (evtpageX offsetX) (evtpageY offsetY)) } else { shiftTo(selectedObj (windoweventclientX offsetX) (windoweventclientY offsetY)) return false } } }   function engage(evt) { setSelectedElem(evt) if (selectedObj) { if (isNav) { offsetX = evtpageX selectedObjleft offsetY = evtpageY selectedObjtop } else { offsetX = windoweventoffsetX offsetY = windoweventoffsetY } } return false }     function release(evt) { if (selectedObj) { setZIndex(selectedObj ) selectedObj = null } }   function setNavEventCapture() { if (isNav) { documentcaptureEvents(EventMOUSEDOWN | EventMOUSEMOVE | EventMOUSEUP) } }   function init() { if (documentlayers) {         var imageurl=documentlargedocumentlargepicsrc         largewidth=documentlargedocumentwidth largeheight=documentlargedocumentheight thumbwidth = Mathfloor(largewidth/shrinkfactor) thumbheight = Mathfloor(largeheight/shrinkfactor)         documentthumbdocumentwrite("<IMG NAME=thumbpic SRC="+imageurl+" width="+thumbwidth+"  height="+thumbheight+">")         documentthumbdocumentclose() documentdragimgdocumentwrite("<IMG NAME=dragimgpic border= SRC=dragimggif width="+dragimgwidth+" height="+dragimgheight+">")         documentdragimgdocumentclose() documentlargeleft=largeleft documentlargetop=largetop   documentthumbleft=thumbleft documentthumbtop=thumbtop   documentdragimgleft=dragimgleft documentdragimgtop=dragimgtop   documentlargeclipleft=clipleft documentlargeclipright=clipright documentlargecliptop=cliptop documentlargeclipbottom=clipbottom documentlargevisibility="visible"   setNavEventCapture() } if (documentall) {         var imageurl=documentlargepicsrc largewidth=documentalllargeoffsetWidth largeheight=documentalllargeoffsetHeight thumbwidth = Mathfloor(largewidth/shrinkfactor) thumbheight = Mathfloor(largeheight/shrinkfactor) thumbinnerHTML="<IMG NAME=thumbpic SRC="+imageurl+" width="+thumbwidth+"  height="+thumbheight+">" dragimginnerHTML="<IMG NAME=dragimgpic border= SRC= width="+dragimgwidth+"  height="+dragimgheight+">"   documentalllargestyleposLeft=largeleft documentalllargestyleposTop=largetop   documentallthumbstyleposLeft=thumbleft documentallthumbstyleposTop=thumbtop   documentalldragimgstyleposLeft=dragimgleft documentalldragimgstyleposTop=dragimgtop clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" documentalllargestyleclip=clippoints documentalllargestylevisibility="visible" }   documentonmousedown = engage documentonmousemove = dragIt documentonmouseup = release }   windowonload=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
  • 上一篇文章:

  • 下一篇文章:
  • Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.