首页 > 网络编程 > JavaScript > 网页特效 > 图象特效 > javascript双向放大缩小

javascript双向放大缩小广告代码

2008-05-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>

<div style="position:absolute;left:50%;top:50%"> 
    <div style="position:absolute;width:720px;height:560px;left:-360px;top:- 
280px;background:#fff"></div> 
    <div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font 
-size:0.9em">Loading...</div> 
    <div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top: 
-240px;overflow:hidden"></div> 
</div>

</body> 
</html>

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