• 2008-11-16

    放大镜

    Tag:

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/dickmoore-logs/53711819.html


    第一步:把如下代码加入<body>区域中
    <STYLE type=text/css>#mglass {
    LEFT: -2000px; POSITION: absolute; TOP: 50px
    }
    #thumb {
    LEFT: -2000px; POSITION: absolute; TOP: 50px
    }
    #large {
    LEFT: -2000px; POSITION: absolute; TOP: 50px
    }
    #framegif {
    LEFT: -2000px; POSITION: absolute; TOP: 50px
    }
    .baseline {
    COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: 9pt; LEFT: 50px; POSITION: absolute; TOP: 260px
    }
    </STYLE>
    <SCRIPT language=JavaScript>
    <!-- Beginning of JavaScript -
    var isNav, isIE
    var offsetX, offsetY
    var selectedObj 
    var enlargefactor=5
    //修改放大的图像位置
    var largewidth = 455
    var largeheight = 523
    var largeleft = 250
    var largetop = 30
    //修改缩小的图像位置
    var thumbwidth = Math.floor(largewidth/enlargefactor)
    var thumbheight = Math.floor(largeheight/enlargefactor)
    var thumbleft = 50
    var thumbtop = 30
    //修改放大块的大小和位置
    var mglasswidth = 32
    var mglassheight = 32
    var mglassleft = 120
    var mglasstop = 110
    var difleft= largeleft-thumbleft
    var diftop= largetop-thumbtop
    var clippoints
    var cliptop = (thumbheight-mglassheight)*enlargefactor
    var clipbottom = cliptop+(mglassheight*enlargefactor)
    var clipleft =(thumbwidth-mglasswidth)*enlargefactor
    var clipright = clipleft+(mglasswidth*enlargefactor)

    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) {
      obj.moveTo(x,y)
    } else {
      obj.pixelLeft = x
      obj.pixelTop = y

    cliptop = (y-thumbtop)*enlargefactor
    clipbottom = cliptop+(mglassheight*enlargefactor)
    clipleft = (x-thumbleft)*enlargefactor
    clipright = clipleft+(mglasswidth*enlargefactor)

    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 - 1; i >= 0; i--) {
       testObj = document.layers
       if ((clickX > testObj.left) && 
        (clickX < testObj.left + testObj.clip.width) && 
        (clickY > testObj.top) && 
        (clickY < testObj.top + testObj.clip.height)) {
         selectedObj = testObj
         setZIndex(selectedObj, 100)
         return
       }
      }
    } else {
      var imgObj = window.event.srcElement
      if (imgObj.parentElement.id.indexOf("mglass") != -1) {
       selectedObj = imgObj.parentElement.style
       setZIndex(selectedObj,100)
       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, 0)
      selectedObj = null
    }
    }
    function setNavEventCapture() {
    if (isNav) {
      document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
    }
    }
    function init() {
    if (document.layers) {
      document.large.left=largeleft
      document.large.top=largetop
      
      document.framegif.left=largeleft-3
      document.framegif.top=largetop-3

      document.thumb.left=thumbleft
      document.thumb.top=thumbtop

      document.mglass.left=mglassleft
      document.mglass.top=mglasstop
      
      document.large.clip.left = 0
      document.large.clip.right = 0
      document.large.clip.top = 0
      document.large.clip.bottom = 0
      
      setNavEventCapture()
    }

    if (document.all) {
      document.all.large.style.posLeft=largeleft
      document.all.large.style.posTop=largetop
      
      document.all.framegif.style.posLeft=largeleft-3
      document.all.framegif.style.posTop=largetop-3

      document.all.thumb.style.posLeft=thumbleft
      document.all.thumb.style.posTop=thumbtop

      document.all.mglass.style.posLeft=mglassleft
      document.all.mglass.style.posTop=mglasstop
      document.all.large.style.clip="rect(0 0 0 0)"
    }

    document.onmousedown = engage
    document.onmousemove = dragIt
    document.onmouseup = release
    }
    // - End of JavaScript - -->
    </SCRIPT>
    //修改图像位置,1、3是需放大的图像,2是放大框,4是放大镜
    <span id=thumb><IMG name=thumbpic src="031.jpg" width=91> 
    </span>
    <span id=framegif><IMG height=166 name=framepic src="frame2311.gif" 
    width=166> </span>
    <span id=large><IMG name=largepic src="031.jpg" width=455> 
    </span>
    <span id=mglass><IMG height=50 name=mglasspic src="mglass.gif" 
    width=50> </span>


    第二步:修改<body***>中的内容,将下面的代码加入原<body***>中
    onload=init()
    分享到: