zoukankan      html  css  js  c++  java
  • 用javascript放大图片局部





    <html>
    <head>
    <title>emu</title>
    </head>
    <body>
    <BR>
    原图:
    <BR>
    <img src="http://img.pconline.com.cn/images/photo2/839980/1118509777696.JPG" onmousemove="zoom()" id=srcImg>
    <BR>
    局部放大图:
    <BR>
    <div style="overflow:hidden"><img id=zoomImg></div>

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    zoomImg.src = srcImg.src;
    srcImg.height = srcImg.height/2;
    var zoomRate = 5;
    zoomImg.height = srcImg.height*zoomRate;
    zoomImg.parentNode.style.width = srcImg.width;
    zoomImg.parentNode.style.height = srcImg.height;
    function zoom(){
    var elm = event.srcElement;
    h = elm.offsetHeight/zoomRate/2;
    w = elm.offsetWidth/zoomRate/2;
    var x = event.x-elm.offsetLeft;
    x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
    zoomImg.style.marginLeft=(w-x)*zoomRate;
    var y = event.y-elm.offsetTop;
    y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
    zoomImg.style.marginTop=(h-y)*zoomRate;
    }
    //
    -->
    </SCRIPT>
    </body>
    </html>
  • 相关阅读:
    2015多校1006.First One
    2015多校.MZL's endless loop(欧拉回路的机智应用 || 构造)
    LUXURY 8
    矩阵快速幂模板
    博弈入门
    cf558c(bfs)
    LUXURY 7
    dfs序 + RMQ = LCA
    双端队列
    UVa-401 Palindromes
  • 原文地址:https://www.cnblogs.com/stonehuang/p/6603227.html
Copyright © 2011-2022 走看看