nicht angemeldet
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.html
Hier 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!
Struppi