Home > Article > Web Front-end > javascript双向放大缩小广告代码_图象特效

javascript双向放大缩小广告代码_图象特效

WBOYOriginal: 2016-05-16 19:04:41992browse

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

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

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js下拉框里超过变成省略号_表单特效Next article：Dom加载让图片加载完再执行的脚本代码_javascript技巧

See more

javascript双向放大缩小广告代码_图象特效

Related articles