zoukankan      html  css  js  c++  java
  • 用javascript制作放大镜放大图片

    <html> 
    <head> 
    <title>emu</title> 
    </head> 
    <body> 
    <BR> 
    原图:<BR> 
    <img src=http://www.web745.com/image/logo.gif width="280" height="150" id=srcImg onmousemove="zoom()"> 
    <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> 
     
  • 相关阅读:
    test
    c# cook book -Linq 关于Object的比较
    关于UnitOfWork
    autofac学习
    webapi 开启跨域支持
    httpclient通过post提交到webapi
    jQuery之元素查找
    jQuery之过滤元素
    jQuery之回到顶部
    jQuery之_元素滚动
  • 原文地址:https://www.cnblogs.com/MaxIE/p/549289.html
Copyright © 2011-2022 走看看