Avatar billede krogstrup Nybegynder
13. september 2000 - 14:21 Der er 3 kommentarer og
1 løsning

Fade nyhedsoverskrifter frem

Jeg har en masse nyhedsoverskrifter.

Jeg ønsker at et javascript skal vise dem een efter een. Jeg forestiller mig at de bliver vist i et dynamisk lag. Når man kommer ind på siden skal første overskrift komme frem langsomt - den skal altså fade fra 0% (opacity) til 100%. Efter f.eks. 5 sek. skal overskriften så fade ud igen og næste overskrift skal fade frem.... osv osv.

Kan det lade sig gøre og hvordan ???
Avatar billede theartist Nybegynder
13. september 2000 - 14:36 #1
Hjulpet meget meget godt på vej af www.bratta.com har jeg fabrikeret dette:


<style type=\"text/css\">
#divNewsCont{position:relative; width:130; height:15; left:0; top:0; visibility:hidden}
#divNews{position:relative}
</style>
<script type=\"text/javascript\" language=\"JavaScript\">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
********************************************************************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
    this.ver=navigator.appVersion
    this.dom=document.getElementById?1:0
    this.ie5=(this.ver.indexOf(\"MSIE 5\")>-1 && this.dom)?1:0;
    this.ie4=(document.all && !this.dom)?1:0;
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
    return this
}
bw=new checkBrowser()

//How do you want the script to work?
//0 = Fade in - Fade out
//1 = Slide in - Fade out
//2 = Random
nWorks=0           

nBetweendelay=2000 //The delay before fading out.
nFont=\'Verdana,Arial,Helvetica,sans-serif\' //The font for the news
nFontsize=10 //font size in pixel
nFadespeed=100 //The speed to fade in, in milliseconds

//Set the colors, first color is same as background, last color is the color it stops at:
//You can have as many colors you want
nColor=new Array(\'#000066\', \'#333399\',\'#6666cc\',\'#9999ff\',\'#CCCCFF\',\'#FFFFFF\')

//This is the news you wanna have, set the link and the text. If you don\'t wan\'t it to link anywhere
//use a # as the link
nNews=new Array()
//Copy there three lines and change the info and numbers to get more news.
nNews[0]=new Array()
nNews[0][\"text\"]=\"Nyhed 1\"
nNews[0][\"link\"]=\"http://davs.dk\"

nNews[1]=new Array()
nNews[1][\"text\"]=\"nyhed 2\"
nNews[1][\"link\"]=\"http://davs.dk\"

nNews[2]=new Array()
nNews[2][\"text\"]=\"nyhed 3\"
nNews[2][\"link\"]=\"http://davs.dk\"

nNews[3]=new Array()
nNews[3][\"text\"]=\"Nyhed 4\"
nNews[3][\"link\"]=\"http://davs.dk\"

nNews[4]=new Array()
nNews[4][\"text\"]=\"Nyhed 5\"
nNews[4][\"link\"]=\"http://Davs.dk\"

/********************************************************************************
Object code...Object constructors and functions...
********************************************************************************/
function makeNewsObj(obj,nest,font,size,color,news,fadespeed,betweendelay,slidespeed,works,newsheight){
    nest=(!nest) ? \'\':\'document.\'+nest+\'.\'
      this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+\"document.layers.\" +obj):0;   
      this.writeref=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+\"document.layers.\" +obj+\".document\"):0;
    if(font){this.color=new Array(); this.color=eval(color); this.news=new Array(); this.news=eval(news)
        this.font=font; this.size=size; this.speed=fadespeed; this.delay=betweendelay; this.newsheight=newsheight
        this.fadeIn=b_fadeIn;this.fadeOut=b_fadeOut; this.newsWrite=b_newsWrite; this.y=1
        this.slideIn=b_slideIn; this.moveIt=b_moveIt; this.slideSpeed=slidespeed; this.works=works
        if(bw.dom || bw.ie4){this.css.fontFamily=this.font; this.css.fontSize=this.size; this.css.color=this.color[0]}
    }
    this.obj = obj + \"Object\";     eval(this.obj + \"=this\"); return this
}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

function b_newsWrite(num,i){
    if(bw.ns4){
        this.writeref.write(\"<a href=\\\"\"+this.news[num][\'link\']+\"\\\" style=\\\"text-decoration:none; font-size:\"+this.size+\"px\\\">\"
            +\"<font face=\\\"\"+this.font+\"\\\" color=\\\"\"+this.color[i]+\"\\\">\"+this.news[num][\'text\']+\"</font></a>\")
        this.writeref.close()
    }else if(bw.dom){
        atag=document.createElement(\"A\"); atag.href=this.news[num][\"link\"]
        atag.id=this.obj+\"link\"; atag.style.color=this.color[i]
        this.writeref.replaceChild(atag,this.writeref.childNodes[0])
        this.writeref.childNodes[0].appendChild(document.createTextNode(\"\"))
        this.writeref.childNodes[0].replaceChild(document.createTextNode(this.news[num][\"text\"]),this.writeref.childNodes[0].childNodes[0])
    }else if(bw.ie4) this.writeref.innerHTML=\"<a id=\\\"\"+this.obj+\"link\" +\"\\\" style=\\\"text-decoration:none; color:\"+this.color[i]+\"\\\" href=\\\"\"+this.news[num][\'link\']+\"\\\">\"+this.news[num][\'text\']+\"</a>\"
}
//Slide in
function b_slideIn(num,i){
    if(this.y>0){
        if(i==0){this.moveIt(0,this.newsheight); this.newsWrite(num,this.color.length-1)}
        this.moveIt(this.x,this.y-this.slideSpeed); i++
        setTimeout(this.obj+\".slideIn(\"+num+\",\"+i+\")\",50)
    }else setTimeout(this.obj+\".fadeOut(\"+num+\",\"+(this.color.length-1)+\")\",this.delay)
}
//The fade functions
function b_fadeIn(num,i){
    if(i<this.color.length){
        if(i==0 || bw.ns4)    this.newsWrite(num,i)
        else{obj=bw.ie4?eval(this.obj+\"link\"):document.getElementById(this.obj+\"link\");obj.style.color=this.color[i]}
        i++; setTimeout(this.obj+\".fadeIn(\"+num+\",\"+i+\")\",this.speed)
    }else setTimeout(this.obj+\".fadeOut(\"+num+\",\"+(this.color.length-1)+\")\",this.delay)
}
function b_fadeOut(num,i){
    if(i>=0){
        if(i==0 || bw.ns4)    this.newsWrite(num,i)   
        else{obj=bw.ie4?eval(this.obj+\"link\"):document.getElementById(this.obj+\"link\");obj.style.color=this.color[i]}
        i--; setTimeout(this.obj+\".fadeOut(\"+num+\",\"+i+\")\",this.speed)
    }else{
        num++; if(num==this.news.length) num=0
        works=!this.works?0:this.works==1?1:Math.round(Math.random())
        if(works==0) setTimeout(this.obj+\".fadeIn(\"+num+\",0)\",500)
        else if(works==1){this.y=1; setTimeout(this.obj+\".slideIn(\"+num+\",0)\",500)
        }
    }
}
/********************************************************************************************
The init function. Calls the object constructor and set some properties and starts the fade
*********************************************************************************************/
function fadeInit(){
    oNews=new makeNewsObj(\'divNews\',\'divNewsCont\',nFont,nFontsize,\"nColor\",\"nNews\",nFadespeed,nBetweendelay,nWorks)
    oNewsCont=new makeNewsObj(\'divNewsCont\')
    works=!oNews.works?0:oNews.works==1?1:Math.round(Math.random())
    if(works==0) oNews.fadeIn(0,0)
    else if(works==1) oNews.slideIn(0,0)
    oNewsCont.css.visibility=\'visible\'
}
</script>



I HTML\'en står følgende i td\'en:

<td height=\"40\" align=\"center\">
                            <div id=\"divNewsCont\">
                            <div id=\"divNews\">Opdater browser!</div>
                            </div></td>
Avatar billede theartist Nybegynder
13. september 2000 - 14:36 #2
spas der var fejl på eksperten ved \"www.bratta.com\" www.bratta.com
Avatar billede theartist Nybegynder
13. september 2000 - 14:37 #3
nå så var der ike nogen fejl alligevel, mystisk!
Avatar billede krogstrup Nybegynder
13. september 2000 - 14:56 #4
Jeg takker for henvisningen til bratta´s udemærkede script - det var lige det jeg havde brug for.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester