[JS] effetto movimento DIV accelerazione/decelerazione

**alexforum** · 08-11-2008, 19:42

ciao a tutti, ho un layer posizionato i maniera assoluta e fatto uscire dallo schermo per renderlo nascosto, tramite js lo faccio riapparire agendo sulla proprieta div.style.top = val+'px';

vorrei però che il movimento fosse più fluido, entri velocemente e deceleri fino alla posizione stabilita, potete darmi una mano

codice:

<script  type="text/javascript">
	function open(){
		function sposta(nP){
			var obj = document.getElementById('panel');
				//obj.style.top = '-80px';

			//obj.style.top += 1 +'px';
			var posTop = obj.style.top;
			var t = posTop.split('px'); 
			var tn = Number(t[0]); 
			var nP = tn+20+"px";  alert(tn)
			if(tn>=0){clearInterval(s)}
			obj.style.top = nP;	
		}
		var obj = document.getElementById('panel');
		obj.style.top = '-80px';
		var nP = (nP!='undefined')?nP:0; 
		var s = setInterval(function(){sposta(nP)},1000);
		
	}
</script>

<style type="text/css">
#panel{
	position: absolute;
	/*top: -80px;*/
	

}
</style>

</head>

<body>
<script type="text/javascript">
window.onload = function(){
	open();
}
</script>
<div id="panel">
dignissim lectus, nec dapibus nibh lorem sodales risus. Donec ac ipsum. Praesent ac lorem. Nunc velit erat, pellentesque ac, mattis ac, convallis vel, purus. Aliquam sit amet justo a augue congue commodo.
</div>

**Xinod** · 08-11-2008, 21:02

(studia e) applica le easing equations di penner
ciao

**whisher** · 09-11-2008, 00:20

Giusto per il gusto di provarci

Codice PHP:


<style type="text/css">

#panel{

    position: absolute;

    /*top: -80px;*/

    width: 200px;

    height: 200px; background-color:#BBBBBB;



}

</style>

<script  type="text/javascript">

    function open(){

        var speed= 0;

        var stop= 200;

        var  self= document.getElementById('panel');

        function sposta(){

            var oldTop= self.style.top.split('px')[0];

            if(oldTop<stop){

                speed = speed+Math.ceil((stop - oldTop)/10) ;

                self.style.top = speed +'px';

            }

            else{

                clearInterval(s);

            }

        }

        self.style.top = -80+'px';

        var s = setInterval(sposta,50);

        

    }

window.onload = function(){

    open();

}

</script>

Ps.

Mi fa impazzire AS

Discussione: [JS] effetto movimento DIV accelerazione/decelerazione

Strumenti discussione

Ricerca discussione

Visualizza

[JS] effetto movimento DIV accelerazione/decelerazione

Permessi di invio