js放大镜放大图片效果

发布时间：2020-12-14 23:43:38 所属栏目：资源来源：网络整理

导读：编程小技巧 js图片放大镜 carefully weight the options [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章: JS简单的图片放大缩小的两种方法 JS实现鼠标移动到缩略图显示大图的图片放大效果鼠标滑上去后图片放大浮出效果的js代码 JavaScr

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head><title>编程小技巧 js图片放大镜</title> 
<meta http-equiv="imagetoolbar" content="no"> 
<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>

/* 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.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></head><body>

<div style="position: absolute; left: 50%; top: 50%;"> 
    <div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;"></div> 
    <div id="border" style="border: 1px solid rgb(85,85,85); background: rgb(0,0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -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) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> 
        <span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/15264627121.jpg" alt=""></p></span> 
        <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -8px;" src="http://www.oudahe.com/uploads/201805/16/15264627122.jpg" alt=""></p></span> 
        <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/15264627133.jpg" alt=""></p></span> 
        <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/15264627134.jpg" alt=""></p></span> 
        <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/15264627145.jpg" alt=""></p></span> 
        <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/15264627146.jpg" alt=""></p></span> 
        <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/15264627157.jpg" alt=""></p></span> 
        <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/15264627158.jpg" alt=""></p></span> 
        <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/15264627169.jpg" alt=""></p></span> 
        <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/152646271610.jpg" alt=""></p></span> 
        <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/152646271711.jpg" alt=""></p></span> 
        <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/152646271712.jpg" alt=""></p></span> 
        <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/152646271813.jpg" alt=""></p></span> 
        <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/152646271814.jpg" alt=""></p></span> 
        <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/152646271915.jpg" alt=""></p></span> 
        <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><p class="pic_center"><img style="left: -11px; top: -9px;" src="http://www.oudahe.com/uploads/201805/16/152646271916.jpg" alt=""></p></span> 
    </div> 
    <div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;"><b>carefully</b> weight the options</div> 
</div>

</body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

JS简单的图片放大缩小的两种方法
JS实现鼠标移动到缩略图显示大图的图片放大效果
鼠标滑上去后图片放大浮出效果的js代码
JavaScript图片放大镜效果代码[代码比较简单]
JS实现点击图片在当前页面放大并可关闭的漂亮效果
移动端点击图片放大特效PhotoSwipe.js插件实现
JavaScript 图片放大效果及代码说明
js实现双击图片放大单击缩小的方法
js 图片放大效果修正版
js实现用滚动条来放大缩小图片的代码
JS与CSS3实现图片响应鼠标移动放大效果示例

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!