Hvordan kontrollere rullefelt med Javascript
Siden Javascript er en klient-side språk som kjører på vanlig nettleser, kan det brukes til å vise interaktive nettsider. Javascript kan brukes til å styre vindu scrollbar funksjonene til en web-side. Faktisk er det mulig å lage en pop-up vindu som ikke har rullefelt i det hele tatt ved hjelp av Javascript. For at Javascript for å kunne tilby dette nivået av interaktivitet derimot, må det være knyttet til både CSS og Javascript-filer.
Bruksanvisning
1 Åpne HTML editor søknad og erklære 2 divs i dokumentet som heter "scrollbar" og \ "Bla". Divs er koder som definerer logiske divisjoner på nettsider innen web side innhold og kan legges på samme måte som tabeller og tabellceller er lagt elementene i den første rulle på HTML-siden skal se slik ut.:
<Html>
<Head>
<Title> Styre rullefelt med Javascript </ flis>
</ Head>
<Body>
...
<Div id = \ "scrollholder \" class = \ "scrollholder \">
<Div id = \ "bla \" class = \ "bla \">
... Plassere rulling innhold her ...
</ Div>
</ Div>
<Script type = \ "text / javascript \">
<! -
ScrollLoad (\ "scrollholder \", \ "bla \", true)
GÅ
// ->
</ Script>
...
</ Body>
Plasser innholdet på websiden i 2 divs.
2 Erklærer CSS og Javascript-filer i overskriften på HTML-siden slik:
<Head>
...
<Link rel = \ "stylesheet \" type = \ "text / css \" href = \ "scroll.css \" mce_href = \ "scroll.css \" media = \ "skjerm, projeksjon \" />
<Script type = \ "text / javascript \" language = \ "Javascript \" src = \ "scroll.js \" mce_src = \ "scroll.js \"> </ script>
...
</ Head>
Plasser elementene i den andre og andre rullefelt på HTML-siden slik:
...
<Div id = \ "scrollholder2 \" class = \ "scrollholder \">
<Div id = \ "scroll2 \" class = \ "bla \">
... Plassere rulling innhold her ...
</ Div>
</ Div>
<Script type = \ "text / javascript \">
<! -
ScrollLoad (\ "scrollholder2 \", \ "scroll2 \", false)
GÅ
// ->
</ Script>
...
3 Lag "Scroll.js" filen og kopier følgende kode inn i filen:
/ Antall rullende gjenstander /
document.No = 0
GÅ
Var isOpera = (window.navigator.userAgent.indexOf (\ "Opera \")> -1)
GÅ
funksjon ScrollLoad (Area, innhold, SettingTracSize)
{
var code = \"var scroller\" + document.No + \" = new dw_scrollObj (Area, Content, Content, Area, document.No);\"
GÅ
if (SettingTracSize)
code += \"scroller\" + document.No + \".setBarSize();\"
GÅ
eval (code)
GÅ
makeMouseWheeleScrolling(Area)
GÅ
document.No++
GÅ
}
/ <Mouse wheele rulle> /
Var mouseWheelTimer = 0
GÅ
funksjon makeMouseWheeleScrolling (objName)
{
var obj = document.getElementById(objName)
GÅ
if (obj.addEventListener)
{
obj.addEventListener(\"DOMMouseScroll\", wheel, false)
GÅ
}
obj.onmousewheel = wheel
GÅ
}
funksjon moveUp (forelder)
{
dw_scrollObj.initScroll(parent.id, \"up\")
GÅ
clearInterval(mouseWheelTimer)
GÅ
mouseWheelTimer = setTimeout(\"mouseStop('\" + parent.id + \"');\", 200)
GÅ
}
funksjon moveDown (forelder)
{
dw_scrollObj.initScroll(parent.id, \"down\")
GÅ
clearInterval(mouseWheelTimer)
GÅ
mouseWheelTimer = setTimeout(\"mouseStop('\" + parent.id + \"');\", 200)
GÅ
}
fungere mouseStop (parentId)
{
dw_scrollObj.stopScroll(parentId)
GÅ
mouseWheelTimer = 0
GÅ
}
/ Musehjulet funksjoner for å rulle på musehjulet efect over objekt med min js scrollbar /
funksjon håndtak (delta, foreldre)
{
var s = delta + \": \"
GÅ
if (delta < 0)
{
if (isOpera)
moveUp (forelder);
ellers
moveDown (forelder)
GÅ
}
else
{
if (isOpera)
moveDown (forelder)
GÅ
ellers
moveUp (forelder)
GÅ
}
}
funksjon hjul (hendelse)
{
var delta = 0
GÅ
if (!event) event = window.event
GÅ
if (event.wheelDelta)
{
delta = event.wheelDelta/120;
if (window.opera) delta = -delta
GÅ
}
else if (event.detail)
{
delta = -event.detail/3
GÅ
}
if (delta)
handle(delta, this)
GÅ
}
/ </ Musehjulet rulling> /
4 Sørg for at alle filene er lagret i samme mappe og kjøre HTML-siden for å teste.
Hint
- Mer funksjonalitet kan legges til som er vist ved Gondo webdesignere nettsted (se Ressurser).