Forum PHP.pl > wylaczenie funkcji

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

acidm

12.03.2011, 23:02:30

witam ,mam problem ze skryptem zmiany stylu css, napisalem funkcje zmieniajaca plynnie dana wartosc stylu do podanego parametru,zainicjowanie nastepuje przez zdarzenie onmouseover a onmouseout ma za zadanie wyzerowac timer wczesniejszy i plynnie przywrocic parametr stylu,i tu wlasnie jest problem ..prosze o pomoc...(z js wlasnie zaczynam)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>

<script type="text/javascript">
function start(obj,wartosc,styll){

if (obj.currentStyle){
var s=obj.currentStyle[styll];
var od=parseInt(s);
}
else {
var w=window.getComputedStyle(obj, null)[styll];
var od=parseFloat(w);
}

clearInterval();
setInterval(run,15);
function run(){
if(od<wartosc){
++od;
}
else if (od>wartosc){
--od;
}
else {
clearInterval();
}
obj.style[styll]=od+'px';
}

}

</script>

<style type="text/css">
div {
background-color: #069;
height: 40px;
width: 40px;
float:left;
margin:5px;
}
</style>
</head>

<body>
<div onmouseover="start(this,'200','height');" onmouseout="start(this,'40','height');"></div>
<div onmouseover="start(this,'200','height');" onmouseout="start(this,'40','height');"></div>
<div onmouseover="start(this,'200','height');" onmouseout="start(this,'40','height');"></div>
</body>
</html>

krowal

13.03.2011, 07:46:04

clearInterval(id) przyjmuje jako parametr id włączonego wcześniej intervala (tak może być ich kilka działających naraz)

[JAVASCRIPT] pobierz, plaintext 
var intervalId = setInterval(function(){}, 1000);
clearInterval(intervalId); //zatrzyma interval o id = intervalId
[JAVASCRIPT] pobierz, plaintext

acidm

13.03.2011, 08:07:12

Kod

clearInterval(w);
var w=setInterval(run,15);
function run(){
if(od<wartosc){
++od;
}
else if (od>wartosc){
--od;
}
else {
clearInterval(w);
}

po poprawkach dalej nie dziala

krowal

13.03.2011, 12:47:20

Przecież 'w' to normalna zmienna, jak chcesz się do niej odwołać przed jej zainicjowaniem ? Najpierw robisz clearInterval(w) na zmiennej którą tworzysz dopiero w kolejnej linijce -> gdzie tu sens ?

Tak myślałem, że przekleisz kod i nawet nie pomyślisz

W twoim przypadku musiałbyś tą zmienną 'w' inicjować na początku kodu jako zmienną globalną. Da się to oczywiście zrobić bez zmiennej globalnej ale musiałbyś przepisać cały kod

acidm

13.03.2011, 16:00:01

Zgadza sie jednak samo zainicjonowanie zmiennej nie wystarczy ,chce wylaczyc wczesniejsze odpalenie timera w chwili wlaczenia powtornego na tym samym obiekcie

krowal

14.03.2011, 20:07:32

Przy inicjacji ustawiaj w = null;
Przy pierwszym pierwszym wywołaniu clearInterval sprawdzaj czy w == null, jeśli nie to czyść, jeśli tak to nie rób nic.
Trzeba trochę pomyśleć.

acidm

23.03.2011, 13:06:39

poradzilem sobie,ale uwagi (propozycje zmian w celu zwiekszenia poprawności i wydajności) mile widziane

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>

<script type="text/javascript">
function animuj(obiekt,docelowa,styll,poczatkowa){
if (typeof obiekt.currentStyle!=='undefined'){
var obecna=parseFloat(obiekt.currentStyle[styll]);}
else {
var obecna=parseFloat(window.getComputedStyle(obiekt, null)[styll]);}

function up(){
var timer=setInterval(function (){
if (obecna<docelowa){obecna+=2}
else if (obecna>docelowa){obecna-=2}
else {clearInterval(timer);}
obiekt.style[styll]=obecna+'px';
},15);
obiekt.onmouseout = function(){
clearInterval(timer);
docelowa=poczatkowa;
up();}
}
up();
}

</script>

<style type="text/css">
div {
background-color: #069;
height: 40px;
width: 40px;
float:left;
margin:5px;

}
</style>
</head>

<body>
<div onmouseover="animuj(this,'200','height','40');" ></div>
<div onmouseover="animuj(this,'200','height','40');" ></div>

</body>
</html>

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.