nicht angemeldet
scrollTo() zeitlich verzögert ausführen
0 0 0 0 0 0 
Struppi
scrollTo() zeitlich verzögert ausführen
Hallo!
Ich kenne mich leider in JavaScript nicht besonders gut aus und komme daher gerade nicht weiter.
Ist es möglich, dass die unten genannte Funktion (bewegt den Bildschirm zur Position 1440px horiziontal und 0px vertikal), wie z.B. die Funktion scrollBy() zeitlich verzögert, also langsam, zur gewünschten Position scrollt?
Bei der Funktion ScrollBy()(http://de.selfhtml.org/javascript/objekte/window.htm#scroll_by) ist dies über eine immer wieder kehrende Abfrage der Seitenhöhe und setTimeOut realisiert.
function Pos1440() {
window.scrollTo(1440, 0);
}
Vielen Dank schonmal!
-
Hi,
dann machs doch so ähnlich...:
function Pos1440() {
window.scrollTo(1440, 0);
}function scrollSlow()
{var currentScrollTop = document.documentElement.scrollTop;
if(currentScrollTop < 1440)
{
window.scrollBy(1,0);
var speed = 100;
var callee = arguments.callee;
window.setTimeout(function(){
callee();
}, speed);}
}so in etwa jedenfalls...
Gruß!
-
function scrollSlow()
{var currentScrollTop = document.documentElement.scrollTop;
if(currentScrollTop < 1440)
{
window.scrollBy(1,0);
var speed = 100;
var callee = arguments.callee;
window.setTimeout(function(){
callee();
}, speed);}
}Danke für die schnelle Antwort, Christian!
Leider kann ich mein Vorhaben mit diesem Script auch nicht wirklich realisieren, weil immer bis zum Ende "durchgescrollt" wird.Habe die Seite mal kurz hochgeladen, damit man sich ungefähr vorstellen kann, worum es geht:
1024x768: http://www.maxwalker.de/123/1024.html
1280x1024: http://www.maxwalker.de/123/1280.html
1440x900: http://www.maxwalker.de/123/1440.htmlHier der Quelltext und anschließend eine kurze Erklärung zum Aufbau:
<script type="text/javascript">
function PosOneTwo () {
window.scrollTo(1440, 0);
}function PosTwoOne () {
window.scrollTo(0, 0);
}function PosTwoThree () {
window.scrollTo(2880, 0);
}function PosThreeTwo () {
window.scrollTo(1440, 0);
}
</script><style type="text/css">
body {
background-color: #FFFFFF;
overflow-y: hidden;
}/*
------------------------------------------------------------------------
Divs
------------------------------------------------------------------------*/#one {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 90%;
background-color: blue;
}#a {
position: absolute;
top: 0; left: 90%; bottom: 0;
width: 10%;
background-color: black;
}#b1 {
position: absolute;
top: 0; left: 100%; bottom: 0;
width: 5%;
background-color: darkgrey;
}#two {
position: absolute;
top: 0; left: 105%; bottom: 0;
width: 90%;
background-color: green;
}#b2 {
position: absolute;
top: 0; left: 195%; bottom: 0;
width: 5%;
background-color: darkgrey;
}#c {
position: absolute;
top: 0; left: 200%; bottom: 0;
width: 10%;
background-color: black;
}#three {
position: absolute;
top: 0; left: 210%; bottom: 0;
width: 90%;
background-color: red;
}/*
------------------------------------------------------------------------
Fonts
------------------------------------------------------------------------*/.T1 {
color: #FFFFFF;
font-size: 80px;
align: center;
}</style>
</head>
<body><div id="one">
<font class="T1">one</font>
</div><div id="a" onMouseOver="javascript:PosOneTwo()">
</div><div id="b1" onMouseOver="javascript:PosTwoOne()">
</div><div id="two">
<font class="T1">two</font>
</div><div id="b2" onMouseOver="javascript:PosTwoThree()">
</div><div id="c" onMouseOver="javascript:PosThreeTwo()">
</div><div id="three">
<font class="T1">three</font>
</div></body>
</html>Die Seite besteht aus drei großen Div-Elementen: blau ("one"), grün ("two") und rot ("three"), die jeweils zu 90% das Fenster ausfüllen, sowie vier kleinen Divs die jeweils dazwischen liegen: a (rechts bei blau), b1 und b2 (links und rechts bei grün), c (links bei rot). Beim Überfahren der kleinen Divs mit der Maus wird das Fenster durch einen JavaScript (derzeit scrollTo() ) nach rechts bzw. links gescrollt.
Dieses Scrollen sollte wenn möglich aber zeitlich verzögert geschehen und an einer bestimmten Position aufhören.
Am besten wäre es, wenn diese Position auch noch durch eine Prozentangabe definiert werden könnte, um unabhängig von der Bildschirmauflösung zu sein.Danke an alle, die sich die Mühe machen das hier durchzusehen.
Danke!-
function scrollSlow()
{var currentScrollTop = document.documentElement.scrollTop;
if(currentScrollTop < 1440)
{
window.scrollBy(1,0);
var speed = 100;
var callee = arguments.callee;
window.setTimeout(function(){
callee();
}, speed);}
}Danke für die schnelle Antwort, Christian!
Leider kann ich mein Vorhaben mit diesem Script auch nicht wirklich realisieren, weil immer bis zum Ende "durchgescrollt" wird.Dieses Scrollen sollte wenn möglich aber zeitlich verzögert geschehen und an einer bestimmten Position aufhören.
Du meinst, dass man den Scrollvorgang sieht? Oder das erst nach 2 sek. gesprungen wird?
Ich versteh nicht was an meinem Script schief läuft, hab aber auch keine Lust das nun zu testen. Aber habe wohl horizontal mit vertikal verwechselt.
Die aktuelle horizontale Scrollposition steckt in document.documentElement.scrollLeft.
Dann scrollst du alle 100ms um 1px weiter (scrollBy), bis du an dem Wert angelangt bist.
Ansonsten mal mit Firebug debuggen.
Am besten wäre es, wenn diese Position auch noch durch eine Prozentangabe definiert werden könnte, um unabhängig von der Bildschirmauflösung zu sein.
Du kannst die totale Breite des Dokuments ausrechnen, und durch 3 teilen, vll. geht das.
document.documentElement.scrollWidth / 3.
Gruß!
-
Nochmals danke!
Dein Script funktioniert super, ich habe da wohl in meinem müden Zustand auch teilweise horizontal und vertikal durcheinander gebracht.
Auch die relative Positionsangabe lässt sich gut anwenden!Das einzige, was noch nicht richtig funktioniert ist das Verschieben des Fensters nach rechts (d.h. Scrollen nach links). Mit der ersten Funktion wird das Fenster um ein drittel der Gesamtbreite nach links verschoben ("scrollLeft"). Demnach müsste in der zweiten Funktion, solange der Positionswert größer als 0 ist, mit "scrollRight" das Fenster nach rechts verschoben werden. Leider geschieht das aber nicht. Habe auch es auch schon mit "currentScrollBottom" versucht, bringt aber auch nichts.
function scrollOneTwo()
{
var currentScrollTop = document.documentElement.scrollLeft;
if(currentScrollTop < document.documentElement.scrollWidth / 3)
{
window.scrollBy(64,0);
var speed = 1;
var callee = arguments.callee;
window.setTimeout(function(){
callee();
}, speed);
}
}function scrollTwoOne()
{
var currentScrollTop = document.documentElement.scrollRight;
if(currentScrollTop > 0)
{
window.scrollBy(32,0);
var speed = 1;
var callee = arguments.callee;
window.setTimeout(function(){
callee();
}, speed);
}
}Wäre nett wenn du noch einmal helfen könnntest!
Noch eine kleine Sache: weißt du, ob man für "var speed" auch Kommazahlen angeben kann?
Danke, Danke, Danke-
Ich habe es herausfinden können.
Vielen Dank trotzdem, Christian!Wenn es sonst noch jemanden interessiert:
Durch Ändern des Vorzeichen der Pixelangaben kann die Scrollrichtung variiert werden. Positive Werte (z.B. +32) führen zu scrollen nach rechts, negative (-32) scrollen nach links.
window.scrollBy( -> +/- 32<- ,0);
-
Noch eine kleine Sache: weißt du, ob man für "var speed" auch Kommazahlen angeben kann?
Klar, aber das wird kaum eine Wirkung haben, da die Zeitangabe bei setTimeout in Millisekunden angegeben wird und eine Veränderung kleiner als eine Millisekunde wird keine sprübare Wirkung haben.
Struppi.
-
-
-
-