Dal momento che JavaScript è un linguaggio lato client che viene eseguito nel browser comuni, può essere utilizzato per visualizzare pagine web interattive. JavaScript può essere usato per controllare la funzionalità della finestra di barra di scorrimento di una pagina web. Infatti, è possibile creare una finestra popup che senza le barre di scorrimento non ha affatto usando JavaScript. In ordine per JavaScript offrire questo livello di interattività, tuttavia, deve essere collegato ai file JavaScript e CSS.
Istruzioni
1
Aprire l'applicazione di editor HTML e dichiarare 2 div nel documento denominato "scrollbar" e \"Scroll". Divs sono tag che definiscono le divisioni logiche su pagine web all'interno di un contenuto della pagina web e possono essere aggiunti allo stesso modo come tabelle e celle di tabella vengono aggiunti. Gli elementi della barra di scorrimento prima pagina HTML dovrebbero assomigliare a questo:
< html >
< head >
< title > Controlling Scrollbars con JavaScript < / piastrelle >
< / head >
< corpo >
...
< div id = \ "scrollholder\" classe = \ "scrollholder\" >
< div id = \ "scroll\" classe = \ "scroll\" >
... posto tuo lo scorrimento contenuto qui...
< / div >
< / div >
< script tipo = \ "testo/javascript\" >
<!...
ScrollLoad (\"scrollholder\", \"scroll\", true)
VAI
-->
< / script >
...
< / body >
Posizionare il contenuto della pagina web in 2 div.
2
Dichiarare i file CSS e JavaScript nell'intestazione della pagina HTML come segue:
< head >
...
< link rel = \ "stylesheet\" tipo = \ "testo/css\" href=\"scroll.css\" mce_href=\"scroll.css\" media = \ "schermo, projection\" / >
< script tipo = \ "testo/javascript\" lingua = \ "JavaScript\" src=\"scroll.js\" mce_src=\"scroll.js\" >< / script >
...
< / head >
Posizionare gli elementi del secondo e altre barre di scorrimento della pagina HTML come segue:
...
< div id = \ "scrollholder2\" classe = \ "scrollholder\" >
< div id = \ "scroll2\" classe = \ "scroll\" >
... posto tuo lo scorrimento contenuto qui...
< / div >
< / div >
< script tipo = \ "testo/javascript\" >
<!...
ScrollLoad (\"scrollholder2\", \"scroll2\", false)
VAI
-->
< / script >
...
3
Creare il file "Scroll.js" e copiare il codice seguente nel file:
/ numero di scorrimento oggetti /
documento. No = 0
VAI
var isOpera = (window.navigator.userAgent.indexOf(\"Opera\") > -1)
VAI
funzione ScrollLoad (Area, contenuto, SettingTracSize)
{
var code = \"var scroller\" + document.No + \" = new dw_scrollObj (Area, Content, Content, Area, document.No);\"
VAI
if (SettingTracSize)
code += \"scroller\" + document.No + \".setBarSize();\"
VAI
eval (code)
VAI
makeMouseWheeleScrolling(Area)
VAI
document.No++
VAI
}
/ < wheele di scorrimento del Mouse > /
var mouseWheelTimer = 0
VAI
funzione makeMouseWheeleScrolling(objName)
{
var obj = document.getElementById(objName)
VAI
if (obj.addEventListener)
{
obj.addEventListener(\"DOMMouseScroll\", wheel, false)
VAI
}
obj.onmousewheel = wheel
VAI
}
funzione moveUp(parent)
{
dw_scrollObj.initScroll(parent.id, \"up\")
VAI
clearInterval(mouseWheelTimer)
VAI
mouseWheelTimer = setTimeout(\"mouseStop('\" + parent.id + \"');\", 200)
VAI
}
funzione moveDown(parent)
{
dw_scrollObj.initScroll(parent.id, \"down\")
VAI
clearInterval(mouseWheelTimer)
VAI
mouseWheelTimer = setTimeout(\"mouseStop('\" + parent.id + \"');\", 200)
VAI
}
funzione mouseStop(parentId)
{
dw_scrollObj.stopScroll(parentId)
VAI
mouseWheelTimer = 0
VAI
}
/ funzioni della rotella del mouse per scorrere il mouse ruota efect sopra oggetto con mio scrollbar js /
maniglia di funzione (delta, padre)
{
var s = delta + \": \"
VAI
if (delta < 0)
{
Se (isOpera)
moveUp(parent);
altro
moveDown(parent)
VAI
}
else
{
Se (isOpera)
moveDown(parent)
VAI
altro
moveUp(parent)
VAI
}
}
funzione wheel(event)
{
var delta = 0
VAI
if (!event) event = window.event
VAI
if (event.wheelDelta)
{
delta = event.wheelDelta/120;
if (window.opera) delta = -delta
VAI
}
else if (event.detail)
{
delta = -event.detail/3
VAI
}
if (delta)
handle(delta, this)
VAI
}
/ < / rotellina del mouse > /
4
Garantire a tutti i tuoi file vengono salvati nella stessa cartella ed eseguire la pagina HTML per testare.
Consigli & Avvertenze
- Altre funzionalità possono essere aggiunti come è mostrato dal sito Gondo Web Designer (Vedi risorse).