javascript双向放大缩小广告代码

ttx9n · 发表于 2008-5-12 22:34:03

比较罕见的javascript双向放大缩小图片效果代码，鼠标上下移动即可看到效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>双向放大缩小广告代码-脚本之家</title> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
    html { 
        overflow: hidden; 
    } 
    body { 
        background: #222; 
        width: 100%; 
        height: 100%; 
        cursor: crosshair; 
    } 
    .spanSlide { 
        position: absolute; 
        background: #000; 
        font-size: 1px; 
        overflow: hidden; 
    } 
    .imgSlide { 
        position: absolute; 
        left: 5%; 
        top: 5%; 
        width: 90%; 
        height: 90%; 
        overflow: hidden; 
    } 
    .txtSlide { 
        position: absolute; 
        top: 5%; 
        left: 50px; 
        width:100%; 
        color:#FFF; 
        font-family: arial, helvetica, verdana, sans-serif; 
        font-weight: bold; 
        font-size:96px; 
        letter-spacing:12px; 
        filter: alpha(opacity=70); 
        -moz-opacity:0.7; 
        opacity:0.7; 
    } 
</style>

var ym=0; 
var ny=0;

createElement = function(container, type, param){ 
    o=document.createElement(type); 
    for(var i in param)o<i>=param<i>; 
    container.appendChild(o); 
    return o; 
}

mooz = { 
    O:[], 
    ///////// 
    mult:6, 
    nbI:5, 
    ///////// 
    rwh:0, 
    imgsrc:0, 
    W:0, 
    H:0,

Xoom:function(N){ 
        this.o = createElement(document.getElementById("screen"), "span", { 
            'className':'spanSlide' 
        }); 
        img = createElement(this.o, "img", { 
            'className':"imgSlide", 
            'src':mooz.imgsrc[N%mooz.imgsrc.length].src 
        }); 
        spa = createElement(this.o, "span", { 
            'className':"imgSlide" 
        }); 
        txt = createElement(spa, "span", { 
            'className':"txtSlide", 
            'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title 
        }); 
        this.N = 10000+N; 
    },

mainloop:function(){ 
        with(this){ 
            for(i=0; i<mooz.nbI; i++) { 
                O<i>.N += (ym-ny)/8000; 
                N = O<i>.N%nbI; 
                ti = Math.pow(mult,N); 
                with(O<i>.o.style){ 
                    left   = Math.round((W-(ti*rwh))/(W+ti)*(W*.5)) 
+"px"; 
                    top    = Math.round((H-ti)/(H+ti)*(H*.5))+"px"; 
                    zIndex = Math.round(10000-ti*.1); 
                    width  = Math.round(ti*rwh)+"px"; 
                    height = Math.round(ti)+"px"; 
                } 
            } 
        } 
        setTimeout("mooz.mainloop();", 16); 
    },

oigres:function(){ 
        with(this){ 
            W = parseInt(document.getElementById("screen").style.width); 
            H = parseInt(document.getElementById("screen").style.height); 
            imgsrc = document.getElementById("images").getElementsByTagName 
("img"); 
            rwh = imgsrc[0].width/imgsrc[0].height; 
            for(var i=0;i<nbI;i++) O<i> = new Xoom(i); 
            mainloop(); 
        } 
    } 
}

document.onmousemove = function(e){ 
    if(window.event) e=window.event; 
    ym = (e.y || e.clientY); 
    if(ym/2>ny)ny=ym/2; 
}

window.onload = function(){ 
    ym = ny+50; 
    mooz.oigres(); 
}

</script> 
</head>

<body>

Loading...

</body> 
</html>

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

回复用户1 · 发表于 2022-9-8 04:49:12

66666666666666666666

idy6_yus · 发表于 2022-9-25 21:08:32

还不错啊

回复用户5 · 发表于 2023-1-31 00:48:19

下载来瞧瞧

Alisaliu · 发表于 2023-4-11 11:05:12

怕怕怕怕怕怕怕怕怕怕怕怕怕怕

dingzhi521 · 发表于 2023-5-7 07:14:30

非常vbcbvcvbvcb

gyalp · 发表于 2023-6-24 01:57:04

好东西一定要看看！

kestlhoxn · 发表于 2023-9-24 11:48:04

1312315458748777

7jbiiz · 发表于 2024-3-27 16:45:42

笑纳了老板

溪谷玉贤 · 发表于 2024-7-11 10:00:21

呵呵呵呵呵呵呵a

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript双向放大缩小广告代码

相关帖子