Tämä JavaScript luo vierityskampanjan, jolla kuva-alue, jolla kuvat liikkuvat vaakasuunnassa näyttöalueen läpi. Koska jokainen kuva katoaa näyttöalueen yhden sivun läpi, se luetaan kuvasarjan alussa. Tämä luo jatkuvan kuvan vierittämistä silmukassa olevassa teltassa niin kauan kuin sinulla on tarpeeksi kuvia täyttääkseen teltan näyttöalueen leveyden.
Tällä komentosarjalla on kuitenkin muutamia rajoituksia:
- Kuvat näytetään samassa koossa (sekä leveys että korkeus). Jos kuvat eivät ole fyysisesti samankokoisia, niiden kaikkien kokoa muutetaan. Tämä voi johtaa heikkoon kuvanlaatuun, joten on parasta pienentää lähdekuvia jatkuvasti.
- Kuvien korkeuden on vastattava teltalle asetettua korkeutta, muuten kuvien kokoa muutetaan samalla potentiaalilla huonoille kuville, jotka mainittiin edellä.
- Kuvan leveyden kerrottuna kuvien määrällä on oltava suurempi kuin teltan leveys. Helpoin ratkaisu tähän, jos kuvia ei ole riittävästi, on vain toistaa taulukossa olevat kuvat aukon täyttämiseksi.
- Ainoa vuorovaikutus, jota tämä skripti tarjoaa, on vierityksen pysäyttäminen, kun hiiri siirretään teltan yli, ja jatkaminen, kun hiiri siirtyy pois kuvasta. Kuvaamme myöhemmin muutosta, joka voidaan tehdä kaikkien kuvien muuntamiseksi linkkeiksi.
- Jos sivulla on useita telttoja, ne kaikki juoksevat samalla nopeudella, joten minkä tahansa sivun siirtäminen heille kaikille lopettaa liikkumisen.
- Tarvitset omia kuviasi. Esimerkeissä mainitut eivät ole osa tätä käsikirjoitusta.
Image Marquee JavaScriptin koodi
Ensimmäinen, kopioi seuraava JavaScripti ja tallenna se nimellä marquee.js.
Tämä koodi sisältää kaksi kuvamatriisia (kahdelle merkkisivulle esimerkkisivulla) sekä kaksi uutta mq-objektia, jotka sisältävät näissä kahdessa vieressä näytettävän tiedon.
Voit poistaa yhden näistä objekteista ja muuttaa toista näyttämään yhden jatkuvan merkkijonon sivullasi tai toistaa nämä lauseet lisätäksesi vielä enemmän merkkimahdollisuuksia.
MqRotate-toimintoa on kutsuttava ohittavaksi mqr: ksi sen jälkeen kun markkinat on määritelty siten, että ne käsittelevät kiertoa.
varmqAry1 = [ 'grafiikka / img0.gif', 'grafiikka / img1.gif', 'grafiikka / img2.gif','
grafiikka / img3.gif ' 'grafiikka / img4.gif', 'grafiikka / img5.gif',' grafiikka /
img6.gif', 'grafiikka / img7.gif', 'grafiikka / img8.gif', 'grafiikka / img9.gif'
'Grafiikka / img10.gif', 'grafiikka / img11.gif', 'grafiikka / img12.gif','
grafiikka / img13.gif', 'grafiikka / img14.gif'];
var
mqAry2 = [ 'grafiikka / img5.gif', 'grafiikka / img6.gif', 'grafiikka / img7.gif','
grafiikka / img8.gif ' 'grafiikka / img9.gif', 'grafiikka / img10.gif',' grafiikka /
img11.gif ' 'grafiikka / img12.gif', 'grafiikka / img13.gif',' grafiikka / img14.
GIF ' 'grafiikka / img0.gif', 'grafiikka / img1.gif', 'grafiikka / img2.gif','
grafiikka / img3.gif', 'grafiikka / img4.gif'];
toiminnon aloitus () {
uusi mq ('m1', mqAry1,60);
uusi mq ('m2', mqAry2,60); // toista niin monta polttoainetta kuin tarvitaan
mqRotate (mqr); // täytyy tulla viimeiseksi
}
ikkuna.lataus = aloitus;
// Jatkuva kuvamerkki
// tekijänoikeudet 24. heinäkuuta 2008 kirjoittanut Stephen Chapman
// http://javascript.about.com
// lupa käyttää tätä Javascriptiä verkkosivustollasi myönnetään
// edellyttäen, että kaikki tämän komentosarjan alla olevat koodit (mukaan lukien nämä)
// kommentit) käytetään ilman muutoksia
var mqr = []; toimia
mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit =
this.mqo.style.height; this.mqo.onmouseout = funktio ()
{mqRotate (mqr);}; this.mqo.onmouseover = funktio ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = pituus;
varten (var
i = 0; ithis.mqo.ary [i] .src = ary [i]; tämä.mqo.ary [i] .style.positio =
'Absoluuttinen'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; tämä.mqo.ary [i] .style.height =
hän se; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
funktio mqRotate (mqr) {if (! mqr) paluu; for (var j = mqr pituus - 1; j
> -1; j--) {maxa = mqr [j] .arvonpituus; for (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.vasen, 10) -1) + 'px';} var y =
mqr [j] .ary [0] .style; if (jäsentää (y.vasen, 10) + jäsentää (y.leveys, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style.leveys) * maxa) + 'px'; mqr [j] .ary.push (z);}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10);}
Lisää seuraavaksi seuraava koodi sivusi yläosaan:
Lisää tyylisivukomento
Meidän on lisättävä tyylisivukomento määrittelemään, kuinka jokainen telttamme näyttää.
Tässä on koodi, jota käytimme esimerkkisivun koodeihin:
.marquee {sijainti: suhteellinen;
ylivuoto piilotettu;
leveys: 500px;
korkeus: 60px;
reunus: kiinteä musta 1px;
}
Voit muuttaa mitä tahansa näistä ominaisuuksista telttaasi; sen on kuitenkin pysyttävä asema: suhteellinen.
Voit joko sijoittaa sen ulkoiseen tyylitaulukkoosi, jos sellainen on, tai sulkea sen väliin tunnisteet sivusi otsikossa.
Määritä mihin teltta sijoitetaan
Seuraava askel on määritellä verkkosivullesi div-osasto, johon sijoitat kuvien vieressä.
Ensimmäisissä esimerkkeissä käytettiin tätä koodia:
Luokka yhdistää tämän tyylitaulukkoon, kun taas id on se, jota käytämme uudessa mq () -kutsuun kuvien viereen.
Varmista, että koodisi sisältää oikeat arvot
Viimeinen asia tämän kaiken koottamiseksi on varmistaa, että koodi, joka lisää mq-objektin JavaScriptiin sivun lataamisen jälkeen, sisältää oikeat arvot.
Yksi esimerkkilauseista näyttää seuraavalta:
uusi mq ('m1', mqAry1,60);
- M1 on div-tunnistemme tunnus, joka näyttää teltan.
- mqAry1 on viittaus joukkoon kuvia, jotka näytetään teltassa.
- Lopullinen arvo 60 on kuvien leveys (kuvat vierittävät oikealta vasemmalle ja niin korkeus on sama kuin tyylitaulukossa määriteltiin).
Lisämerkkien lisäämiseksi olemme vain perustaneet ylimääräisiä kuvamatriiseja, ylimääräisiä osioita HTML-koodiin, mahdollisesti asetettuja ylimääräisiä luokkia, jotta tyylisuunnittelu tapahtuu eri tavalla, ja lisätään niin monta uutta mq () -lausetta kuin meillä on telttakatokset. Meidän on vain varmistettava, että mqRotate () -kutsu seuraa heitä toimimaan merkkituotteita meille.
Markkinakuvien tekeminen linkkeiksi
Sinun on tehtävä vain kaksi muutosta, jotta telttakuvista saadaan linkkejä.
Vaihda ensin kuvamatriisi kuvasarjasta taulukkojoukkoksi, jossa jokainen sisäinen ryhmä koostuu kuvasta asemassa 0 ja linkin osoitteesta paikassa 1.
var mqAry1 = [
[ 'Grafiikka / img0.gif', 'blcmarquee1.htm'],
[ 'Grafiikka / img1.gif', 'blclockm1.htm'], ...
['grafiikka / img14.gif', 'bltypewriter.htm']];
Toinen tehtävä on korvata seuraava käsikirjoituksen pääosa:
// Jatkuva Image Marquee Linkillä
// tekijänoikeudet 21. syyskuuta 2008 kirjoittanut Stephen Chapman
// http://javascript.about.com
// lupa käyttää tätä Javascriptiä verkkosivustollasi myönnetään
// edellyttäen, että kaikki tämän komentosarjan alla olevat koodit (mukaan lukien nämä)
// kommentit) käytetään ilman muutoksia
var mqr = []; funktio mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = tämä.mqo.style.korkeus; this.mqo.onmouseout = function () {mqRotate (mqr);}; this.mqo.onmouseover = function () {clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = pituus; for (var i = 0; i
Loppuosa mitä sinun täytyy tehdä, pysyy samana kuin on kuvattu telttaversiolle, jolla ei ole linkkejä.