首頁 > 開發者 > JavaScript
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>網頁特效觀止|www.jscode.cn| --- 給地圖加個放大鏡</title><SCRIPT> var shrinkfactor=5 // left and top position of the thumbnailimage // (distance to the left and top browser-margin, pixels)var thumbleft = 30var thumbtop = 30 // left and top position of the zoomed image // (distance to the left and top browser-margin, pixels)var largeleft = 300var largetop = 30 // width and height of the enlarged image's sector (visible part, pixels)var clipwidth = 240var clipheight = 160</SCRIPT><SCRIPT> var isNav, isIEvar offsetX, offsetYvar selectedObj var largewidth = 0var largeheight = 0 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+3var dragimgtop = thumbtop+3 var difleft= largeleft-thumbleftvar diftop= largetop-thumbtop var clippoints var cliptop=0var clipbottom=cliptop+clipheightvar clipleft=0var clipright=clipleft+clipwidth if (parseInt(navigator.appVersion) >= 4) {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-2)) {x=document.thumb.left+thumbwidth-dragimgwidth-2}if(y<=document.thumb.top) {y=document.thumb.top}if(y>=(document.thumb.top+thumbheight-dragimgheight-2)) {y=document.thumb.top+thumbheight-dragimgheight-2}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-2)) {x=document.all.thumb.style.posLeft+thumbwidth-dragimgwidth-2}if(y<=document.all.thumb.style.posTop) {y=document.all.thumb.style.posTop}if(y>=(document.all.thumb.style.posTop+thumbheight-dragimgheight-2)) {y=document.all.thumb.style.posTop+thumbheight-dragimgheight-2}obj.pixelLeft = xobj.pixelTop = y}cliptop = (y-thumbtop)*shrinkfactorclipbottom = cliptop+clipheightclipleft = (x-thumbleft)*shrinkfactorclipright = clipleft+clipwidth if (document.all) {clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.all.large.style.posTop=largetop-cliptopdocument.all.large.style.posLeft=largeleft-clipleftdocument.all.large.style.clip=clippoints}if (document.layers) {document.large.top=largetop-cliptopdocument.large.left=largeleft-clipleftdocument.large.clip.left = clipleftdocument.large.clip.right = cliprightdocument.large.clip.top = cliptopdocument.large.clip.bottom = clipbottom}} function setSelectedElem(evt) {if (isNav) {var testObjvar clickX = evt.pageXvar clickY = evt.pageYfor (var i = document.layers.length - 1; i >= 0; 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 = testObjsetZIndex(selectedObj, 100)return}}} else {var imgObj = window.event.srcElementif (imgObj.parentElement.id.indexOf("dragimg") != -1) {selectedObj = imgObj.parentElement.stylesetZIndex(selectedObj,100)return}}selectedObj = nullreturn} 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.leftoffsetY = evt.pageY - selectedObj.top} else {offsetX = window.event.offsetXoffsetY = window.event.offsetY}}return false} function release(evt) {if (selectedObj) {setZIndex(selectedObj, 0)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.widthlargeheight=document.large.document.heightthumbwidth = 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=2 SRC='dragimg.gif' width="+dragimgwidth+" height="+dragimgheight+">") document.dragimg.document.close()document.large.left=largeleftdocument.large.top=largetop document.thumb.left=thumbleftdocument.thumb.top=thumbtop document.dragimg.left=dragimgleftdocument.dragimg.top=dragimgtop document.large.clip.left=clipleftdocument.large.clip.right=cliprightdocument.large.clip.top=cliptopdocument.large.clip.bottom=clipbottomdocument.large.visibility="visible" setNavEventCapture()}if (document.all) { var imageurl=document.largepic.srclargewidth=document.all.large.offsetWidthlargeheight=document.all.large.offsetHeightthumbwidth = 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=2 SRC='http://www.bkjia.com/uploads/allimg/131028/1953045951-0.GIF' width="+dragimgwidth+" height="+dragimgheight+">" document.all.large.style.posLeft=largeleftdocument.all.large.style.posTop=largetop document.all.thumb.style.posLeft=thumbleftdocument.all.thumb.style.posTop=thumbtop document.all.dragimg.style.posLeft=dragimgleftdocument.all.dragimg.style.posTop=dragimgtopclippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.all.large.style.clip=clippointsdocument.all.large.style.visibility="visible"} document.onmousedown = engagedocument.onmousemove = dragItdocument.onmouseup = release} window.onload=init</SCRIPT></head> <body><p>用滑鼠移動下面的方框，效果不錯吧</p><center><DIV style="position:absolute;visibility:hidden;" ID="large"><IMG NAME="largepic" SRC="http://www.jscode.cn/Uploadfile/2006515151036789.JPG"></DIV><DIV style="position:absolute;" ID="thumb"></DIV><DIV style="position:absolute;" ID="dragimg"></DIV></center></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
