Efeito 3d interessante, mas como melhorar isso?

JonathasMarcelo · July 27, 2011

Bom o problema é que eu não sou um bom conhecedor de javascript e queria redimensionar as imagens abaixo proporcionalmente, pois pretendo fazer uma consulta em php usar esse script como um album, com paginação pegando 8 imagens de cada vez(como indicado abaixo), então o mais viavel seria diminuir em 10x as dimensões das imagens, como posso fazer isso?

script tirado daqui: http://www.dhteumeul.../tag/3d/page/4/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>before my eyes - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
        html { 
                overflow: hidden; 
        } 
        body { 
                background: #399; 
                width:100%; 
                height:100%; 
                margin:0; 
        } 
        #screen { 
                position: absolute; 
                width: 100%; 
                height: 100%; 
        } 

        #img { 
                visibility: hidden; 
        } 
        #screen img  { 
                position:absolute; 
                left:-10000px; 
                z-index:100; 
                -ms-interpolation-mode:nearest-neighbor; 
                image-rendering: optimizeSpeed; 
                cursor: pointer; 
                border:#333 solid 1px; 
        } 
        #tit { 
                text-align:center; 
                position:absolute; 
                color:#fff; 
                font-family:verdana; 
                font-weight:bold; 
                font-size:48px; 
                filter: alpha(opacity=30); 
                opacity: 0.3; 
                width:100%; 
                bottom:12px; 
                z-index:10000; 
        } 
</style> 
&lt;script type="text/javascript"> 
// ======================================================= 
// script: Gerard Ferrandez - Ge-1-doot - May 22, 2004 
// http://www.dhteumeuleu.com 
// Updated: February 2010 - namespaced 
// ======================================================= 


var diapo = function () { 
        var object = new Array(), 
            K  = Math.PI / 180, 
            N  = 0, 
            xm = 0, 
            ym = 0, 
            mx = 0, 
            my = 0, 
            ax = 0, 
            ay = 0, 
            Nb = 0, 
            tit = 0, 
            img = 0; 
//////////////////// 
        var zM = 4; 
//////////////////// 
        var CObj = function (N, x, y, z){ 
                var I = img.getElementsByTagName("img")[N % img.getElementsByTagName("img").length]; 
                var o = document.createElement("img"); 
                o.onclick = function () { 
                        if (object[N].on == true) object[N].on = false; 
                        else object[N].on = true; 
                } 
                o.onmouseover = function () { 
                        if (Nb != N) { 
                                Nb = N; 
                                tit.innerHTML= I.alt; 
                        } 
                } 
                o.onmouseout = function () { 
                        Nb = -1; 
                        object[N].on = false; 
                } 
                o.onmousedown = new Function("return false"); 
                o.src = I.src; 
                scr.appendChild(o); 
                this.obj  = o.style; 
                this.z    = Math.round(z * ny * .25); 
                this.x    = Math.round(x * ny * .25); 
                this.y    = Math.round(y * ny * .25); 
                this.on   = false; 
                this.zOOm = 1; 
                this.N    = N; 
        } 

        CObj.prototype.anim = function () { 
                var xP = this.z * Math.sin(mx * K) + this.x  * Math.cos(mx * K); 
                var zP = this.z * Math.cos(mx * K) - this.x  * Math.sin(mx * K); 
                var yP = this.y * Math.cos(my * K) - zP * Math.sin(my * K); 
                zP = this.y * Math.sin(my * K) + zP * Math.cos(my * K); 
                var w = (zP * .25 + ny * .25) * this.zOOm; 
                var h = w * .8; 
                if (this.on && zP > 0) { 
                        if (this.zOOm < zM) this.zOOm += .05; 
                } else { 
                        if (this.zOOm > 1) this.zOOm -= .025; 
                } 
                this.obj.left   = Math.round(xP + nx * .5 - w * .5) + "px"; 
                this.obj.top    = Math.round(yP + ny * .5 - h * .5) + "px"; 
                this.obj.width  = Math.round(w) + "px"; 
                this.obj.height = Math.round(h) + "px"; 
                this.obj.zIndex = Math.round(1000 + w); 
        } 

        var run = function () { 
                dx = (1 * xm) - mx; 
                dy = (1 * ym) - my; 
                mx += dx / 60; 
                my += dy / 60; 
                var i = 0, o; 
                while (o = object[i++]) o.anim(); 
                setTimeout(run, 16); 
        } 

        var resize = function () { 
                nx = scr.offsetWidth; 
                ny = scr.offsetHeight * .9; 
        } 

        var init = function () { 
                scr = document.getElementById("screen"); 
                img = document.getElementById("img"); 
                tit = document.getElementById("tit"); 
                resize(); 
                scr.onselectstart = new Function("return false"); 
                onresize = resize; 
                scr.onmousemove = function(e){ 
                        if (window.event) e = window.event; 
                        xm = (e.x || e.clientX); 
                        ym = (e.y || e.clientY); 
                } 
                object.push( new CObj(0,1,-1,-1) ); 
                object.push( new CObj(1,1,1,-1) ); 
                object.push( new CObj(2,-1,-1,-1) ); 
                object.push( new CObj(3,-1,1,-1) ); 
                object.push( new CObj(4,1,-1,1) ); 
                object.push( new CObj(5,1,1,1) ); 
                object.push( new CObj(6,-1,-1,1) ); 
                object.push( new CObj(7,-1,1,1) ); 


                run(); 
        } 
        //////////////////////////////////////////////////////////// 
        return { 
                init : init 
        } 
}(); 

onload = function (){ 
        diapo.init(); 
} 

</script> 
</head> 

<body> 

<div id="screen"> 
        <div id="img"> 
<img src="url_imagem"/>
<img src="url_imagem"/>
<img src="url_imagem"/>
<img src="url_imagem"/>
<img src="url_imagem"/>
<img src="url_imagem"/>
<img src="url_imagem"/>
<img src="url_imagem"/>

        </div> 
        <div id="tit" >
    </div> 
</div> 

</body> 
</html>[/codebox]

Edited July 28, 2011 by fercosmig
add tags

Sign In

Efeito 3d interessante, mas como melhorar isso?

Question

JonathasMarcelo

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Forum Statistics

Browse

Activity