19. marts 2005 - 19:56
Der er
14 kommentarer og 1 løsning
Tekstskift + fade ind og ud
Hej eksperter. Jeg har brug for en, der har forstand på javascript. Det jeg vil opnå er følgende: En funktion der skifter mellem 2 tekster (er lavet og fungerer). Problemer er så, at jeg gerne vil have teksterne til at fade ind og ud når de skifter. Jeg har lavet følgende: (Håber i kan tyde det, det er skrevet ind i en Literal, da jeg skal udskrive det codebehind i en ASP.Net fil). Literal js = new Literal(); js.Text += "<script type='text/javascript'>\n"; js.Text += "var arrText = new Array();\n"; js.Text += "arrText[0] = 'Tekst1';\n"; js.Text += "arrText[1] = 'Tekst2';\n"; js.Text += "var textToShow = 0;\n"; js.Text += "function fadeOut()\n"; js.Text += "{\n"; js.Text += "var thDiv = document.getElementById('text_holder_div');\n"; js.Text += "if(thDiv.filters.alpha.opacity <= 100)\n"; js.Text += "{\n"; js.Text += "thDiv.filters.alpha.opacity += 5;\n"; js.Text += "setTimeout('fadeOut()',100);\n"; js.Text += "}\n"; js.Text += "};\n"; js.Text += "function fadeIn()\n"; js.Text += "{\n"; js.Text += "var thDiv = document.getElementById('text_holder_div');\n"; js.Text += "if(thDiv.filters.alpha.opacity >= 0)\n"; js.Text += "{\n"; js.Text += "thDiv.filters.alpha.opacity -= 5;\n"; js.Text += "setTimeout('fadeIn()',100);\n"; js.Text += "}\n"; js.Text += "};\n"; js.Text += "function showText()\n"; js.Text += "{\n"; js.Text += "var thDiv = document.getElementById('text_holder_div');\n"; js.Text += "fadeOut(thDiv);\n"; js.Text += "thDiv.innerHTML = arrText[textToShow];\n"; js.Text += "fadeIn(thDiv);\n"; js.Text += "textToShow = (++textToShow) % arrText.length;\n"; js.Text += "t = window.setTimeout('showText()', 10*1000);\n"; js.Text += "};\n"; js.Text += "</script>\n";
Annonceindlæg fra Cepheo
19. marts 2005 - 19:57
#1
Glemte måske at nævne, at der slet ikke sker en fading. Teksterne skifter helt fint som de skal.
19. marts 2005 - 20:02
#2
Ja ok.. så kan jeg se, at jeg kalder mine funktioner (fadeOut og fadeIn) med min div som parameter - men det er bare fordi jeg har testet med lidt af hvert. Se venligst bort fra parametret.
19. marts 2005 - 20:36
#4
Jeg kigger... :-)
19. marts 2005 - 21:03
#5
Dit script ser ud til at gøre nøjagtigt hvad jeg vil, jeg kan bare ikke få det til at fungere, når jeg sætter det ind i mit dokument :-) Gider du prøve at se om du kan finde fejlen? Fejlen jeg får er: "OpC[...] er null eller ikke et objekt." js.Text += "var OpC = new Array();\n"; js.Text += "var endOpC = new Object();\n"; js.Text += "var ie = (document.all)?true:false;\n"; js.Text += "var moz = (navigator.userAgent.indexOf('Gecko')>-1);\n"; js.Text += "function startOpChange(elm,end,tim){\n"; js.Text += "if(!ie && !moz){\n"; js.Text += "return;\n"; js.Text += "}\n"; js.Text += "var idx = OpC.length;\n"; js.Text += "for(var i=0;idx>i;i++){\n"; js.Text += "if(OpC[i][0]==elm){\n"; js.Text += "clearInterval(OpC[i][4]);\n"; js.Text += "idx = i;\n"; js.Text += "break;\n"; js.Text += "};\n"; js.Text += "OpC[idx] = new Array();\n"; js.Text += "};\n"; js.Text += "if(idx==0){\n"; js.Text += "OpC[idx] = new Array();\n"; js.Text += "};\n"; js.Text += "if(ie){\n"; js.Text += "actOp=elm.filters.alpha.opacity;\n"; js.Text += "}else{\n"; js.Text += "actOp=(elm.style.MozOpacity*100);\n"; js.Text += "}\n"; js.Text += "if(actOp!=end)\n"; js.Text += "{\n"; js.Text += "OpC[idx][0]=elm;\n"; js.Text += "OpC[idx][1]=actOp;\n"; js.Text += "OpC[idx][2]=end;\n"; js.Text += "OpC[idx][3]=(end>actOp)?1:-1;\n"; js.Text += "var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));\n"; js.Text += "OpC[idx][4]=setInterval(\"opChange(idx)\",delayTime);\n"; js.Text += "};\n"; js.Text += "};\n"; js.Text += "function opChange(idx){\n"; js.Text += "OpC[idx][1]+=OpC[idx][3];\n"; js.Text += "if(ie){\n"; js.Text += "OpC[idx][0].filters.alpha.opacity=OpC[idx][1];\n"; js.Text += "}else{\n"; js.Text += "OpC[idx][0].style.MozOpacity=Math.min(0.99,OpC[idx][1]/100);\n"; js.Text += "}\n"; js.Text += "if(OpC[idx][1]==OpC[idx][2]){\n"; js.Text += "clearInterval(OpC[idx][4]);\n"; js.Text += "return;\n"; js.Text += "};\n"; js.Text += "};\n";
19. marts 2005 - 21:12
#6
Det er nok fordi du har fkernet en ganske lille detalje, som er _meget_ vigtig: js.Text += "if(actOp!=end)\n"; js.Text += "{\n"; js.Text += "OpC[idx][0]=elm;\n"; js.Text += "OpC[idx][1]=actOp;\n"; js.Text += "OpC[idx][2]=end;\n"; js.Text += "OpC[idx][3]=(end>actOp)?1:-1;\n"; js.Text += "var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));\n"; js.Text += "OpC[idx][4]=setInterval('opChange('+idx+')',delayTime);\n"; js.Text += "};\n"; js.Text += "};\n";
19. marts 2005 - 21:36
#7
Det var bestemt ikke min mening at ændre i dit script, så det har været et uheld. Men med din rettelse får jeg nu ingen fejl, dog bliver opacity stadig ikke ændret :/
19. marts 2005 - 21:37
#8
Kan du prøve at linke til en udgave ?-)
19. marts 2005 - 21:39
#9
Ja, hvis du har en mail eller en messenger adresse :-) Det er ikke lige en opgave alle skal kunne se ind til videre.
19. marts 2005 - 21:41
#10
-- min mail-adresse er ikke svær at finde, men ellers er det mit brugernavn på gmail ...
19. marts 2005 - 21:44
#11
Mail sendt
19. marts 2005 - 21:59
#12
Det er fordi, du skal have forskellige elementer, for det er hele elementet, som udfører ind- og udfadingen !-) Så showtext således: var textToShow = 0; var numDiv = 1; function showText() { var thDiv = document.getElementById('text_holder_div'+numDiv); startOpChange(thDiv,0,1); numDiv = numDiv==0?1:0; var thDiv = document.getElementById('text_holder_div'+numDiv); textToShow = (++textToShow) % arrText.length; thDiv.innerHTML = arrText[textToShow]; startOpChange(thDiv,100,1); t = window.setTimeout('showText()', 2000); }; -- og så dine divs således: <div id='text_holder_div' style="position:relative"> <div id='text_holder_div0' style='position:absolute;filter:alpha(opacity=0);-moz-opacity:0;'></div> <div id='text_holder_div1' style='position:absolute;filter:alpha(opacity=0);-moz-opacity:0;'></div> </div></td>
20. marts 2005 - 21:25
#13
Mange tak for din hjælp. Det virker perfekt. Lig et svar, så skal du få point :-)
20. marts 2005 - 21:26
#14
Velbekomme '-)
20. marts 2005 - 21:34
#15
-- og tak for point ;~}
Vi tilbyder markedets bedste kurser inden for webudvikling