Simpel script lukt me niet
Ik probeer een div te laten bewegen van links naar rechts met javascript. als je een button ingedrukt houdt.
Bij onMouseDown begint de div met bewegen, bij onMouseUp stopt de div met bewegen elke keer dat je de button inhoudt beweegt de div dus verder van links naar rechts.
Dit heb ik tot nu toe, maar het werkt op een of andere manier niet. De javascript foutmelding zegt iets over het event onMouseDown. Maar daar is toch niks mis mee? Het is maar een klein stukje script dus kan iemand misschien helpen of een voorbeeld geven?
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
29
30
31
32
33
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
29
30
31
32
33
<html>
<head>
<script type="text/JavaScript">
positieLinks = document.getElementById("verplaatsDiv").style.left;
function startMove() {
beginInterval = setInterval("beweeg()",10);
}
function stopMove() {
clearInterval(beginInterval);
}
function beweeg() {
document.getElementById("verplaatsDiv").style.left=positieLinks;
positieLinks++;
}
</script>
<style>
#verplaatsDiv {
width: 100px;
height: 100px;
border: 1px solid lightgrey;
position: absolute;
top: 100px;
left: 30px;
}
</style>
</head>
<body>
<div id="verplaatsDiv">
</div>
<input type="button" onMouseDown="startMove()" onMouseUp="stopMove()" value="Klik">
</body>
</html>
<head>
<script type="text/JavaScript">
positieLinks = document.getElementById("verplaatsDiv").style.left;
function startMove() {
beginInterval = setInterval("beweeg()",10);
}
function stopMove() {
clearInterval(beginInterval);
}
function beweeg() {
document.getElementById("verplaatsDiv").style.left=positieLinks;
positieLinks++;
}
</script>
<style>
#verplaatsDiv {
width: 100px;
height: 100px;
border: 1px solid lightgrey;
position: absolute;
top: 100px;
left: 30px;
}
</style>
</head>
<body>
<div id="verplaatsDiv">
</div>
<input type="button" onMouseDown="startMove()" onMouseUp="stopMove()" value="Klik">
</body>
</html>
Als ik de div laat beginnen met bewegen op het moment dat de pagina wordt geladen (interval dus direct starten) dan beweegt de div wel!
Gewijzigd op 23/06/2012 19:33:43 door Jan terhuijzen
Tevens moet je positieLinks (en de regel daarachter) in je functie beweeg() zetten. Denk ik.
Gewijzigd op 23/06/2012 19:47:41 door jan terhuijzen
Kleine aanpassing:
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
29
30
31
32
33
34
35
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
29
30
31
32
33
34
35
<html>
<head>
<script type="text/JavaScript">
var positieLinks=0;
function init() {
// update ... waarschijnlijk is dit het beste
positieLinks = document.getElementById("verplaatsDiv").offsetLeft;
}
function startMove() {
beginInterval = setInterval("beweeg()",10);
}
function stopMove() {
clearInterval(beginInterval);
}
function beweeg() {
document.getElementById("verplaatsDiv").style.left = positieLinks;
positieLinks++;
}
</script>
<style>
#verplaatsDiv {
width: 100px;
height: 100px;
border: 1px solid lightgrey;
position: absolute;
top: 100px;
left: 30px;
}
</style>
</head>
<body onload="init()">
<div id="verplaatsDiv"></div>
<input type="button" onMouseDown="startMove()" onMouseUp="stopMove()" value="Klik">
</body>
</html>
<head>
<script type="text/JavaScript">
var positieLinks=0;
function init() {
// update ... waarschijnlijk is dit het beste
positieLinks = document.getElementById("verplaatsDiv").offsetLeft;
}
function startMove() {
beginInterval = setInterval("beweeg()",10);
}
function stopMove() {
clearInterval(beginInterval);
}
function beweeg() {
document.getElementById("verplaatsDiv").style.left = positieLinks;
positieLinks++;
}
</script>
<style>
#verplaatsDiv {
width: 100px;
height: 100px;
border: 1px solid lightgrey;
position: absolute;
top: 100px;
left: 30px;
}
</style>
</head>
<body onload="init()">
<div id="verplaatsDiv"></div>
<input type="button" onMouseDown="startMove()" onMouseUp="stopMove()" value="Klik">
</body>
</html>
Was dit de bedoeling?
Gewijzigd op 25/06/2012 15:01:52 door Kris Peeters