怎样实现图片放大

我有一张图片，我想当鼠标移到这个图片上时，出现这个图片放大的效果，用JavaScript怎样做？整个页面不发生变化。请各位高手帮忙解决一下吧，谢谢
谢谢，真的很需要，谢谢

解决方案 »

  1.   

    jquery插件:zoomimage
      

  2.   

    chen_xiangguo 兄  顺便也发给我一份，不胜感激
      

  3.   

    chen_xiangguo 兄  顺便也发给我一份，不胜感激[email protected]
      

  4.   

    zoomimage
    可以下载了。
      

  5.   

    也给我发一份 感谢  [email protected]
      

  6.   

    我给你发一个html代码
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>图片放大或缩小</title>
    <script language="JavaScript">   
    <!--   
    function imagesizemax(){
     document.all.ok.width=460; 
     document.all.ok.height=320;
    }  
    function imagesizemin(){
     document.all.ok.width=231; 
     document.all.ok.height=170;
    }  
    // -->   
    </script> 
    </head><body>
    <input name="shan" id="ok" type="image" src="IMG02.gif" height="170" width="231"  onMouseOver="imagesizemax()" onMouseOut="imagesizemin()">
    </body>
    </html>
      

  7.   

    http://bbs.blueidea.com/thread-2954073-1-1.html
    这里也有
      

  8.   

    http://thunderbow.javaeye.com/blog/275819
      

  9.   

    <p>
    <meta content="no" http-equiv="imagetoolbar" /><style type="text/css"> body {
    background: #222;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    }
    #screen span {
    position:absolute;
    overflow:hidden;
    border:#FFF solid 1px;
    background:#FFF;
    }
    #screen img{
    position:absolute;
    left:-32px;
    top:-32px;
    cursor: pointer;
    }
    #caption, #title{
    color: #FFF;
    font-family: georgia, 'times new roman', times, veronica, serif;
    font-size: 1em;
    text-align: center;
    }
    #caption b {
    font-size: 2em;
    }</style></p>
    <p> </p>
    <script type="text/javascript"><!--
    window.onerror = new Function("return true");
    var obj = [];
    var scr;
    var spa;
    var img;
    var W;
    var Wi;
    var Hi;
    var wi;
    var hi;
    var Sx;
    var Sy;
    var M;
    var xm;
    var ym;
    var xb = 0;
    var yb = 0;
    var ob =  - 1;
    var cl = false;/* needed in standard mode */
    px = function(x)
    {
    return Math.round(x) + "px";
    }/* center image  - do not resize for perf. reason */
    img_center = function(o)
    {
    with(img[o])
    {
    style.left = px( - (width - Wi) / 2);
    style.top = px( - (height - Hi) / 2);
    }
    }//////////////////////////////////////////////////////////
    var Nx = 4; //size grid x
    var Ny = 4; //size grid y
    var Tx = 3; // image width
    var Ty = 3; // image height
    var Mg = 40; // margin
    var SP = 1; // speed
    //////////////////////////////////////////////////////////function Cobj(o, x, y)
    {
    this.o = o;
    this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2))));
    this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2))));
    this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;
    this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;
    this.l = 0;
    this.t = 0;
    this.w = 0;
    this.h = 0;
    this.s = 0;
    this.mv = false;
    this.spa = spa[o].style;
    this.img = img[o];
    this.txt = img[o].alt;
    img[o].alt = ""; /* zooming loop */
    this.zoom = function()
    {
    with(this)
    {
    l += li * s;
    t += ti * s;
    w += wi * s;
    h += hi * s;
    if ((s > 0 && w < Wi) || (s < 0 && w > Sx))
    {
    /* force window.event */
    window.focus();
    /* loop */
    setTimeout("obj[" + o + "].zoom()", 16);
    }
    else
    {
    /* finished */
    mv = false;
    /* set final position */
    if (s > 0)
    {
    l = ix * M + ix * Sx;
    t = iy * M + iy * Sy;
    w = Wi;
    h = Hi;
    }
    else
    {
    l = x * M + x * Sx;
    t = y * M + y * Sy;
    w = Sx;
    h = Sy;
    }
    }
    /* html animation */
    with(spa)
    {
    left = px(l);
    top = px(t);
    width = px(w);
    height = px(h);
    zIndex = Math.round(w);
    }
    }
    } this.click = function()
    {
    with(this)
    {
    img_center(o);
    /* zooming logic */
    if ( ! mv || cl)
    {
    if (s > 0)
    {
    if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4)
    {
    s =  - 2;
    mv = true;
    zoom();
    cap.innerHTML = txt;
    }
    }
    else
    {
    if (cl || ob != o)
    {
    if (ob >= 0)
    {
    with(obj[ob])
    {
    s =  - 2;
    mv = true;
    zoom();
    }
    }
    ob = o;
    s = 1;
    xb = xm;
    yb = ym;
    mv = true;
    zoom();
    cap.innerHTML = txt;
    }
    }
    }
    }
    }

    /* hook up events */
    img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()");
    img[o].onclick = new Function("cl=true;obj[" + o + "].click()");
    img[o].onload = new Function("img_center(" + o + ")"); /* initial display */
    this.zoom();
    }/* mouse */
    document.onmousemove = function(e)
    {
    if ( ! e)
    {
    e = window.event;
    }
    xm = (e.x || e.clientX);
    ym = (e.y || e.clientY);
    }/* init */
    function load()
    {
    /* html elements */
    scr = document.getElementById("screen");
    spa = scr.getElementsByTagName("span");
    img = scr.getElementsByTagName("img");
    cap = document.getElementById("caption");

    /* mouseover border */ 
    document.getElementById("border").onmouseover = function()
    {
    cl = true;
    if(ob >= 0 && obj[ob].s > 0) obj[ob].click();
    ob = -1;
    } /* global variables */
    W = parseInt(scr.style.width);
    H = parseInt(scr.style.height);
    M = W / Mg;
    Sx = (W - (Nx - 1) * M) / Nx;
    Sy = (H - (Ny - 1) * M) / Ny;
    Wi = Tx * Sx + (Tx - 1) * M;
    Hi = Ty * Sy + (Ty - 1) * M;
    SP = M * Tx * SP;
    wi = (Wi - Sx) / SP;
    hi = (Hi - Sy) / SP;

    /* create objects */
    for (k = 0, i = 0; i < Nx; i ++)
    {
    for (j = 0; j < Ny; j ++)
    {
    obj[k] = new Cobj(k ++, i, j);
    }
    }
    }
    //-->
    </script>
    <div style="left: 50%; position: absolute; top: 50%">
    <div id="title" style="left: -220px; width: 440px; position: absolute; top: -200px; height: 40px"> </div>
    <div id="border" style="border-right: rgb(85,85,85) 1px solid; border-top: rgb(85,85,85) 1px solid; background: rgb(0,0,0) 0% 50%; left: -220px; border-left: rgb(85,85,85) 1px solid; width: 440px; border-bottom: rgb(85,85,85) 1px solid; position: absolute; top: -170px; height: 340px; moz-background-clip: -moz-initial; moz-background-origin: -moz-initial; moz-background-inline-policy: -moz-initial"> </div>
    <div id="screen" style="background: rgb(0,0,0) 0% 50%; left: -200px; width: 400px; position: absolute; top: -150px; height: 300px; moz-background-clip: -moz-initial; moz-background-origin: -moz-initial; moz-background-inline-policy: -moz-initial"><span style="z-index: 93; left: 0px; width: 93px; top: 0px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" /></span> <span style="z-index: 93; left: 0px; width: 93px; top: 78px; height: 68px"><img style="left: -11px; top: -8px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" /></span> <span style="z-index: 93; left: 0px; width: 93px; top: 155px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" /></span> <span style="z-index: 93; left: 0px; width: 93px; top: 233px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" /></span> <span style="z-index: 93; left: 103px; width: 93px; top: 0px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" /></span> <span style="z-index: 93; left: 103px; width: 93px; top: 78px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" /></span> <span style="z-index: 93; left: 103px; width: 93px; top: 155px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" /></span> <span style="z-index: 93; left: 103px; width: 93px; top: 233px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im18.jpg" /></span> <span style="z-index: 93; left: 205px; width: 93px; top: 0px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im8.jpg" /></span> <span style="z-index: 93; left: 205px; width: 93px; top: 78px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im10.jpg" /></span> <span style="z-index: 93; left: 205px; width: 93px; top: 155px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im12.jpg" /></span> <span style="z-index: 93; left: 205px; width: 93px; top: 233px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im17.jpg" /></span> <span style="z-index: 93; left: 308px; width: 93px; top: 0px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im14.jpg" /></span> <span style="z-index: 93; left: 308px; width: 93px; top: 78px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im15.jpg" /></span> <span style="z-index: 93; left: 308px; width: 93px; top: 155px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im16.jpg" /></span> <span style="z-index: 93; left: 308px; width: 93px; top: 233px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im9.jpg" /></span></div>
    <div id="caption" style="left: -220px; width: 440px; position: absolute; top: 175px; height: 60px"><strong>carefully</strong> weight the options</div>
    </div>
    <script type="text/javascript"><!--
    // starter
    load();
    //-->
    </script>