javascript放大圖片

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

核心代碼收集於網路（IE6,7,8,Firefox/3.6.11和TT4.8下測試通過）.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無標題頁</title>
    <script type="text/javascript">
    function CreatePopup() {
        var SetElementStyles = function( element, styleDict ) {
            var style = element.style ;
            for ( var styleName in styleDict )style[ styleName ] = styleDict[ styleName ] ;
        }
        var eDiv = document.createElement( 'div' );
        SetElementStyles( eDiv, { 'position': 'absolute', 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'zIndex': 1000, 'display' : 'none', 'overflow' : 'hidden' } ) ;
        eDiv.body = eDiv ;
       var opened = false ;
       var setOpened = function( b ) {
           opened = b;
       }
       var getOpened = function() {
           return opened ;
       }
       var getCoordinates = function( oElement ) {
           var coordinates = {x:0,y:0} ;
           while( oElement ) {
               coordinates.x += oElement.offsetLeft ;
               coordinates.y += oElement.offsetTop ;
               oElement = oElement.offsetParent ;
           }
           return coordinates ;
       }
      return {
          htmlTxt : '',
          document : eDiv,
          isOpen : getOpened(),
          isShow : false,
          hide : function() {
              SetElementStyles( eDiv, { 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'display' : 'none' } ) ;
              eDiv.innerHTML = '' ;
              this.isShow = false ;
          },
          show : function( iX, iY, iWidth, iHeight, oElement ) {
              if (!getOpened()) { document.body.appendChild( eDiv ) ; setOpened( true ) ; } ;
              this.htmlTxt = eDiv.innerHTML ;
              if (this.isShow) { this.hide() ; } ;
              eDiv.innerHTML = this.htmlTxt ;
              var coordinates = getCoordinates ( oElement ) ;
              eDiv.style.top = ( iX + coordinates.x ) + 'px' ;
              eDiv.style.left = ( iY + coordinates.y ) + 'px' ;
              eDiv.style.width = iWidth + 'px' ;
              eDiv.style.height = iHeight + 'px' ;
              eDiv.style.display = 'block' ;
              this.isShow = true ;
          }
      }
   }
    var oPopup;//控製圖片的展示
    if (!window.createPopup) {
        oPopup=CreatePopup();
    }
    else{
        oPopup = window.createPopup();
    }
    function FillOutImage(imgUrl,eventTag) {
        with (oPopup.document.body) {
            style.backgroundColor = "lightyellow";
            style.border = "solid black 1px";
            innerHTML = "<img src='" + imgUrl + "' width='100%' height='100%' />";
        }
        var event = eventTag||window.event;
        oPopup.show(event.clientX + 80, event.clientY+10, 300, 250);//表單的大小
    }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <img src="imgages/bg_cm.jpg" border="0" width="100" height="100" onmousemove="FillOutImage('imgages/bg_cm.jpg',event)" onmouseout="oPopup.hide();" alt=""/>
    </div>
    <div id="divHere"></div>
    </form>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More