Kuinka hallita Vierityspalkit Javascript

Vierityspainike rullaa kuva Evan Meyer Fotolia.com

Koska JavaScript on client-side kieltä, joka toimii yhteisen selaimen, se voidaan käyttää näyttämään vuorovaikutteisia verkkosivuja.JavaScript voidaan käyttää ohjaamaan ikkunaan scrollbar ominaisuuksia sivun.Itse asiassa on mahdollista luoda ponnahdusikkuna, joka ei ole vierityspalkkeja ollenkaan JavaScriptin avulla.Jotta JavaScript tarjota tämän tason interaktiivisuutta kuitenkin on sidoksissa sekä CSS ja JavaScript-tiedostot.

Ohjeet

  1. Avaa HTML-editori sovelluksen ja julistaa 2 divs asiakirjassa nimeltään "vierityspalkkia" ja \ "Scroll." Divsovat tunnisteita, jotka määrittelevät loogiseen osaan verkkosivuilla sisällä web-sivun sisällön ja voidaan lisätä samalla tavalla kuin Pöydät ja solujen lisäämistä. elementit ensimmäisen vierityspalkin HTML-sivun pitäisi näyttää tältä:

    & lt; html & gt;
    & lt; head & gt;
    & lt; title & gt; hallinta Vierityspalkit JavaScript & lt; / laatta & gt;
    & lt; / head & gt;
    & lt; body & gt;
    ...
    & lt; div id = \ "scrollholder \" class = \ "scrollholder \"& gt;
    & lt; div id = \" selaa \ "class = \" selaa \ "& gt;
    ... laita vieritys sisältöä täällä ...
    & lt; / div & gt;
    & lt; / div & gt;
    & lt; script type = \ "text / javascript \" & gt;
    & lt;! -
    ScrollLoad (\ "scrollholder \", \ "Scroll \", true)
    GO
    // - & gt;
    & lt; / script & gt;
    ...
    & lt; / body & gt;

    Aseta web-sivun sisältöä 2 divs.

  2. toteaa CSS ja JavaScript-tiedostot otsikossa HTML-sivun seuraavasti:

    & lt; head & gt;
    ...
    & lt; link rel = \ "stylesheet \" type = \ "text / css \" href = \ "scroll.css \" mce_href = \ "scroll.css \" media = \ "näyttö, projektio \"/ & gt;
    & lt; script type = \ "text / javascript \" kieli = \ "JavaScript \" src = \ "scroll.js \" mce_src = \ "scroll.js \" & gt; & lt; / script & gt;
    ...
    & lt; / head & gt;

    Aseta elementtejä toisen ja muut vierityspalkit HTML-sivun seuraavasti:

    ...
    & lt; div id = \ "scrollholder2 \" class = \ "scrollholder \" & gt;
    & lt; div id = \ "scroll2 \" class = \ "selaa \" & gt;
    ... laita rullata sisältöä täällä ...
    & lt; / div & gt;
    & lt; / div & gt;
    & lt; script type = \ "text / javascript \" & gt;
    & lt;! -
    ScrollLoad (\ "scrollholder2 \", \ "scroll2 \", false)
    GO
    // - & gt;
    & lt; / script & gt;
    ...

  3. Luo "Scroll.js" tiedosto ja kopioi seuraava koodi tiedostoon:

    / määrä vieritys esineet /
    document.No = 0
    GO

    var isOpera = (ikkuna.navigator.userAgent.indexOf (\ "Opera \") & gt; -1)
    GO

    toiminto ScrollLoad (Area, sisältö, SettingTracSize)
    {

    var koodi = \ & amp; quot; var rullauspalkkia \ & amp; quot;+ Document.No + \ & amp; quot;= Uusi dw_scrollObj (Area, sisältö, sisältöä, alue, document.No); \ & amp; quot;

    GO

    jos (SettingTracSize)
    koodi + = \ & amp; quot; rullauspalkkia \ & amp; quot;+ Document.No + \ & amp; quot; .setBarSize (); \ & amp; quot;

    GO

    eval (koodi)

    GO

    makeMouseWheeleScrolling (alue)

    GO

    document.No ++

    GO
    }

    / & lt; hiiri wheele rullata & gt; /
    var mouseWheelTimer = 0
    GO

    toiminto makeMouseWheeleScrolling (objName)
    {

    var obj = document.getElementById (objName)

    GO

    jos (obj.addEventListener)
    {
    obj.addEventListener (\ & amp; quot; DOMMouseScroll\ & amp; quot ;, pyörä, false)

    GO

    }
    obj.onmousewheel = pyörän

    GO
    }

    toiminto MoveUp (vanhempi)
    {

    dw_scrollObj.initScroll (parent.id, \ & amp; quot; ylös \ & amp, quot;)

    GO

    clearInterval (mouseWheelTimer)

    GO

    mouseWheelTimer = setTimeout (\ & amp; quot; mouseStop ('\ & amp; quot; + parent.id + \ & amp; quot; "); \ & amp; quot ;,200)

    GO
    }

    toiminto moveDown (vanhempi)
    {

    dw_scrollObj.initScroll (parent.id, \ & amp; quot; alas \ & amp; quot;)

    GO

    clearInterval (mouseWheelTimer)

    GO

    mouseWheelTimer = setTimeout (\ & amp; quot; mouseStop ('\ & amp; quot;+ Parent.id + \ & amp; quot; '); \ & amp; quot ;, 200)

    GO
    }

    toiminto mouseStop (ParentId)
    {

    dw_scrollObj.stopScroll (ParentId)

    GO

    mouseWheelTimer = 0

    GO
    }

    / hiiren rullaa toiminnot vierittää hiiren rullaa vaikuttaneet yli esine minun js scrollbar /
    toiminto kahva (delta, vanhempi)
    {

    var s = delta + \ & amp; quot ;: \ & amp; quot;

    GO

    jos (delta & amp; lt; 0)
    {

    jos (isOpera)
    MoveUp (vanhempi);
    muu
    moveDown (vanhempi)
    GO

    }
    muu
    {

    jos (isOpera)
    moveDown (vanhempi)
    GO
    muu
    MoveUp (vanhempi)
    GO

    }

    }

    toiminto pyörän (tapahtuma)
    {

    var delta = 0

    GO

    jos (! tapahtuma) tapahtuma = window.event

    GO

    jos (event.wheelDelta)
    {
    delta = event.wheelDelta / 120;
    jos (window.opera) delta = delta

    GO

    }
    if (event.detail)
    {
    delta = -event.detail / 3

    GO

    }
    jos (delta)
    kahva (delta, tämä)

    GO
    }
    / & lt; / hiiren rullaa rullata & gt; /

  4. Varmista, että kaikki tiedostot tallennetaan samaan kansioon ja suorita HTML-sivun testata.

Vinkkejä & amp;Varoitukset

  • Enemmän toiminnallisuutta voidaan lisätä minkä osoittaa Gondo Web Designers verkkosivuilla (ks Resources).

Resurssit

  • Gondo Web Designers: Javascript Vierityspalkki
  • Gondo Web Designers: Javascript Vierityspalkki koodi
586
0
2
Java Script Ohjelmointi