Hoe te scrollen banners op een website maken

meerdere manieren bestaan ​​om een ​​spandoek met de tekst scrollen creëren.De eenvoudigste manier om een ​​idee hoe het proces werkt te krijgen is een banner met een tekstverwerker, zoals Kladblok, dat deel uitmaakt van Windows te creëren.In Kladblok kunt u een korte demonstratie webpagina met scrollen mogelijkheden met behulp van enkele HTML-elementen of scripting code zoals JavaScript of VBScript te creëren.JavaScript heeft de voorkeur omdat het een beetje compatibel met alle browsers.Met meer geavanceerde software kun je scrollen beelden ook maken, maar de complicaties van dit proces buiten het bestek van dit artikel.

wat je nodig hebt

  • Windows Kladblok of een ander tekstverwerkingsprogramma

instructies

  1. Maak een basis scrollen banner door het openen van Kladblok in het menu "Start" in Windows.Het programma wordt in de groep "accessoires".Typ in Kladblok de volgende regels precies zoals getoond.Deze code wordt een regel tekst die wordt gelezen één karak

    ter per keer en voortdurend stootte naar rechts met de "substring" commando's.De tekst verschijnt dan in een vorm die op de webpagina op een bannerpositie bovenaan het scherm.Om de tekst scroll langzamer te maken, toename van het aantal in de "setTimeout" lijn.Verlaag dit aantal het versnellen van de scroll.. Br / & gt;; de achtergrondkleur (BGCOLOR) kunt welke kleur je wenst & lt & lt; br / & gt; & lt; html & gt; & lt; br / & gt; & lt; head & gt; & lt; br / & gt; & gt; & lt; /head & gt; & lt; br / & gt; & lt; SCRIPT LANGUAGE = \ "JavaScript \" & gt; & lt; br / & gt; var scr = "...."+ \" Deze woorden zal blijven scrollen over de banner .... \ "& lt; br / & gt; functie ScrollAlong () & lt; br / & gt; {& lt; br / & gt; temp = scr.substring (0,1) & lt; br / & gt; GO & lt; br / & gt; scr + = temp & lt; br / & gt; scr = scr.substring (1, scr.length) & lt; br / & gt; GO & lt; br />document.BannerScroll.Banner.value = scr.substring (0,55) & lt; br / & gt; GO & lt; br / & gt; setTimeout (\ "ScrollAlong () \", 100), & lt; br / & gt; GO & lt; br / & gt;} & lt; br / & gt; & lt; / SCRIPT & gt; & lt; br / & gt; & lt; BODY BGCOLOR = \ "# 00FF00 \" onLoad = \ "ScrollAlong () \" & gt; & lt; br / & gt; & lt; vorm naam = \"BannerScroll \" & gt; & lt; br / & gt;& lt; div align = \ "center \" & gt; & lt; br / & gt;& lt; invoer name = \ "banner \" type = \ "text \" value = \ "\" size = \ "90 \" / & gt; & lt; br / & gt;& lt; / div & gt; & lt; br / & gt; & lt; / body & gt; & lt; br / & gt; & lt; html & gt; & lt; br / & gt; & lt; br / & gt; Sla dit bestand met een naam van uw keuze ter vervanging van de standaard".txt" extensie met ".HTML".Bekijk het resultaat met het lokaliseren van de bestanden op uw pc, klikken op "Openen met" en het kiezen van "Internet Explorer" of uw favoriete webbrowser.

  2. Superimpose de scrollende tekst op een afbeelding voor een liefhebber look.Bij deze methode een tafel boven aan de webpagina.Het berust dan op de "Marquee" element en verscheidene andere commando's om de richting herhalingsvertraging en omvang van de rollende tekst regelen.Vervang het beeld in de lijn die begint met "& lt; td achtergrond" met de bestandsnaam en de locatie van uw gewenste beeld.Veranderen de kleuren om wat je wilt.Verander de "scrolldelay" en andere controles om de tekst aan te passen. & Lt; br / & gt; & lt; br / & gt; & lt; html & gt; & lt; br / & gt; & lt; head & gt; & lt; br / & gt; & lt; / head & gt;& lt; br / & gt; & lt; body & gt; & lt; br / & gt; & lt; table width = \ "500 \" height = \ "150 \" border = \ "2 \" align = \ "center \" & gt; & lt; br / & gt; & lt; tr & gt; & lt; br / & gt; & lt; td achtergrond = \ "C: [gebruik uw eigen afbeelding hier]" bgcolor = \ "#FFFFFF \" & gt; & lt; font size = \ "4\ "face = \" Arial \ "color = \" # 000000 \ "& gt; & lt; b & gt; & lt; br / & gt; & lt; tent richting = \" juiste \ "scrolldelay = \" 200 \ "& lt; br /& gt; gedrag = \ "scroll \" scrollamount = \ "20 \" width = \ "700 \" height = \ "50 \" loop = \ "true \" & gt; & lt;.. br / & gt ;. Deze tekstzal blijven scrollen over de banner & lt;... br / & gt; & lt; / marquee & gt; & lt; / b & gt; & lt; / font & gt; & lt; / td & gt; & lt; br / & gt; & lt; / tr & gt; & lt; br /& gt; & lt; / table & gt; & lt; br / & gt; & lt; / body & gt; & lt; br / & gt; & lt; / html & gt; & lt; br / & gt; & lt; br / & gt; Sla het bestand op en bekijk het als in stap1.

  3. Maak de tekst scroll over de bovenkant van het beeld met een "Div" tag en de grootte van een "H2" tag.Veranderen in stap 2 van de code als volgt, dan opslaan en bekijken zoals aangegeven.& lt; br / & gt; & lt; br / & gt; & lt; html & gt; & lt; br / & gt; & lt; head & gt; & lt; br / & gt; & lt; / head & gt; & lt; br / & gt; & lt; body & gt; & lt; br/ & gt; & lt; div & gt; & lt; br / & gt;& lt; tent richting = \ "juiste \" scrolldelay = \ "200 \" & lt; br / & gt; gedrag = \ "scroll \" scrollamount = \ "20 \" width = \ "700 \" height = \ "50 \"loop = \" true \ "& gt; & lt; br / & gt;& lt; h2 & gt ;.Deze tekst zal blijven scrollen over de banner...& lt; / h2 & gt; & lt; br / & gt;& lt; / marquee & gt; & lt; br / & gt; & lt; img src = \ "[Plaats de bestandsnaam en de locatie van uw afbeelding] \" width = \ "1000 \" height = \ "175 \" / & gt; & lt; br/ & gt; & lt; / div & gt; & lt; br / & gt; & lt; / body & gt; & lt; br / & gt; & lt; / html & gt;

  4. Plaats de banner code in uw eigen web-pagina wanneer tevreden en uploaden naar je webhost.

Tips & amp;Waarschuwingen

  • De eerste versie van deze scroll code maakt gebruik van Active-X controls.Afhankelijk van uw browser beveiligingsinstellingen, kunt u een prompt vertelt u Windows is de werking van de controle geblokkeerd en vragen om toestemming om door te gaan krijgen.In dit geval is het veilig om door te gaan, omdat het bestand op uw eigen pc. & Lt; br / & gt; & lt; br / & gt; Tenzij scrollen banners vaak worden gewijzigd, bijvoorbeeld met nieuwsberichten, kunnen zij saai voor frequente bezoekers.
  • U moet deze tekst bestanden opslaan als HTML-bestanden of het scrollen banner proces zal niet werken. & Lt; br / & gt; & lt; br / & gt; Niet alle webbrowsers ondersteunen de Marquee-element.Denk na over leesbare tekst toe te voegen als goed.

Resources

  • http://www.javascript.com/
453
0
0
Java Script