Div background position javascript
Ik ben op zoek naar een manier on de achtergrond van een div verticaal te laten schuiven.
Het schuiven kan zo snel gaan dat je de afbeelding niet goed kan zien. totdat het schuiven stopt.
de afbeelding is bijvoorbeeld 1000px hoog en 60px breed. het schuiven herhaalt zich totdat er bijvoorbeeld op een button wordt geklikt.
Nu heb ik al vanalles geprobeerd met Javascript. maar het werkt niet.
Heeft iemand enig idee hoe ik dat kan doen of hoe het script eruit komt te zien?
Dit heb ik nu
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<script>
var top = 0;
function start() {
var herhaal = setInterval("rol()",10); // 10 microseconden
}
function rol() {
document.getElementById("roldiv").style.backgroundPosition="10px "+top;
top++;
}
function stop() {
clearInterval(herhaal);
}
</script>
<style>
#roldiv {
width: 60px;
height: 200px;
}
</style>
</head>
<body>
<div id="roldiv" style="background: url('afbeelding.png');"></div>
<input type="button" onclick="start()" value="Start">
<input type="button" onclick="stop()" value="Stop">
</body>
</html>
<head>
<script>
var top = 0;
function start() {
var herhaal = setInterval("rol()",10); // 10 microseconden
}
function rol() {
document.getElementById("roldiv").style.backgroundPosition="10px "+top;
top++;
}
function stop() {
clearInterval(herhaal);
}
</script>
<style>
#roldiv {
width: 60px;
height: 200px;
}
</style>
</head>
<body>
<div id="roldiv" style="background: url('afbeelding.png');"></div>
<input type="button" onclick="start()" value="Start">
<input type="button" onclick="stop()" value="Stop">
</body>
</html>
Gewijzigd op 12/03/2012 19:56:00 door Jan terhuijzen
Dit valt onder het kopje "het wiel opnieuw uitvinden", dus gaat eens op zoek naar een stuk javascript wat doet wat jij wilt.
om te beginnen bij bijvoorbeeld: jquery
Gewijzigd op 14/03/2012 20:36:09 door Noppes Homeland