Scrollbars mit Javascript Steuern
Da JavaScript eine clientseitige Sprache, die auf die gängigen Browser läuft ist, kann es eingesetzt werden, um interaktive Webseiten anzuzeigen. JavaScript kann man Fenster Scrollbar Funktionen einer Webseite verwendet werden. In der Tat ist es möglich, ein Popup-Fenster zu erstellen, die keine Scrollbars überhaupt hat mit JavaScript. Damit JavaScript, um dieses Maß an Interaktivität jedoch anbieten muss es mit CSS und JavaScript-Dateien verknüpft werden.
Anweisungen
1 Öffnen Sie Ihre HTML-Editor-Anwendung und erklären Sie 2 Divs in das Dokument mit dem Titel "Scrollbar" und \"Scroll zu." Divs sind Tags, die logische Unterteilungen auf Web-Seiten innerhalb einer Web-Seite-Inhalt zu definieren und können genauso als Tabellen hinzugefügt werden, und Tabellenzellen werden hinzugefügt. Die Elemente der ersten Scrollbar auf der HTML-Seite sollte wie folgt aussehen:
< html >< Head >< Title > Controlling Scrollbars mit JavaScript < / Fliesen >< / head >< Körper >...< Div Id = \ "Scrollholder\" Klasse = \ "Scrollholder\" >< Div Id = \ "Scroll\" Klasse = \ "Scroll\" >... Ihre Scrollen Inhalt hier platzieren...< / Div >< / Div >< Skript Typ = \ "Text/Javascript\" ><!--ScrollLoad (\"scrollholder\", \"scroll\", true)GEHEN-->< / script >...< / body >
Setzen Sie die Webseiteninhalte in 2 Divs.
2 Deklarieren Sie die CSS und JavaScript-Dateien im Header der HTML-Seite wie folgt:
< Head >...< link Rel = \ "Stylesheet\" Typ = \ "Text/Css\" href=\"scroll.css\" mce_href=\"scroll.css\" Medien = \ "Bildschirm, Projection\" / >< Skript Typ = \ "Text/Javascript\" Sprache = \ "JavaScript\" src=\"scroll.js\" mce_src=\"scroll.js\" >< / script >...< / head >
Platzieren Sie die Elemente der zweiten und andere Scrollbars auf HTML-Seite wie folgt:
...< Div Id = \ "scrollholder2\" Klasse = \ "Scrollholder\" >< Div Id = \ "scroll2\" Klasse = \ "Scroll\" >... Ihre Scrollen Inhalt hier platzieren...< / Div >< / Div >< Skript Typ = \ "Text/Javascript\" ><!--ScrollLoad (\"scrollholder2\", \"scroll2\", false)GEHEN-->< / script >...
3 Erstellen Sie die Datei "Scroll.js" und kopieren Sie den folgenden Code in die Datei:
/ Anzahl der Bildlauf Objekte /Dokuments. Nein = 0GEHEN
Var IsOpera = (window.navigator.userAgent.indexOf(\"Opera\") > -1)GEHEN
Funktion ScrollLoad (Area, Inhalt, SettingTracSize){
var code = \"var scroller\" + document.No + \" = new dw_scrollObj (Area, Content, Content, Area, document.No);\"
GEHEN
if (SettingTracSize) code += \"scroller\" + document.No + \".setBarSize();\"
GEHEN
eval (code)
GEHEN
makeMouseWheeleScrolling(Area)
GEHEN
document.No++
GEHEN}
/ < Maus scrollen Wheele > /Var MouseWheelTimer = 0GEHEN
Funktion makeMouseWheeleScrolling(objName){
var obj = document.getElementById(objName)
GEHEN
if (obj.addEventListener) { obj.addEventListener(\"DOMMouseScroll\", wheel, false)
GEHEN
} obj.onmousewheel = wheel
GEHEN}
Funktion moveUp(parent){
dw_scrollObj.initScroll(parent.id, \"up\")
GEHEN
clearInterval(mouseWheelTimer)
GEHEN
mouseWheelTimer = setTimeout(\"mouseStop('\" + parent.id + \"');\", 200)
GEHEN}
Funktion moveDown(parent){
dw_scrollObj.initScroll(parent.id, \"down\")
GEHEN
clearInterval(mouseWheelTimer)
GEHEN
mouseWheelTimer = setTimeout(\"mouseStop('\" + parent.id + \"');\", 200)
GEHEN}
Funktion mouseStop(parentId){
dw_scrollObj.stopScroll(parentId)
GEHEN
mouseWheelTimer = 0
GEHEN}
/ Rad Mausfunktionen auf Maus-Rad-Efekt über Objekt mit meinen Js Scrollbar Blättern /Funktion-Handle (Delta, Eltern){
var s = delta + \": \"
GEHEN
if (delta < 0) {
Wenn (IsOpera)moveUp(parent);sonstmoveDown(parent)GEHEN
} else {
Wenn (IsOpera)moveDown(parent)GEHENsonstmoveUp(parent)GEHEN
}
}
Funktion wheel(event){
var delta = 0
GEHEN
if (!event) event = window.event
GEHEN
if (event.wheelDelta) { delta = event.wheelDelta/120; if (window.opera) delta = -delta
GEHEN
} else if (event.detail) { delta = -event.detail/3
GEHEN
} if (delta) handle(delta, this)
GEHEN}/ < / Mausrad Scrollen > /
4 Sicherzustellen Sie, dass alle Ihre Dateien im selben Ordner gespeichert werden, und führen Sie die HTML-Seite zu testen.
Tipps & Warnungen
- Weitere Funktionen hinzugefügt werden kann, wie der Gondo-Webdesigner-Website zeigt (siehe Ressourcen).