Animation en javascript/css à paramétrer
Bonjour,
je viens de créer une petite animation qui marche très bien...
que voici:
Code:
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!DOCTYPE html>
<html lang="fr">
<head>
<style>
.stylebox
{
width:100px;
height:40px;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:15px;
padding:10px;
float:left;
margin:20px;
margin-right:50px;
border:1px solid #888888;
border-radius:10px;
}
#mabox
{
border:5px solid #000000;
background:green;
margin:10px;
opacity:0.7;
}
</style>
<script>
var zebox,zeangle=0,zeevent
function boxTransform()
{
clearInterval(zeevent)
zeevent=setInterval("startTransform('skew')",1)
}
function startTransform(funct)
{
box=document.getElementById("mabox")
zeangle=zeangle+2
box.style.transform=funct+"(" + zeangle + "deg)"
if (!(zeangle%180)) //arret sur un demi-tour!
{
clearInterval(zeevent)
}
zeangle %=360;
}
</script>
</head>
<body >
<div style="height:80px;">
<div onclick="boxTransform()" id="mabox" class="stylebox">Oulalalala</div>
</div>
</body>
</html> |
je souhaite maintenant chopper le parametre event! dans la fonction...
donc logiquement
Code:
1
2
3
4
5
6
|
zeevent=setInterval("startTransform(zeevent,'skew')",1)
...
function startTransform(event, funct)
....
clearInterval(event) |
hors ca ne semble pas fonctionner, le event n'est pas le zeevent...
ce qui me parait logique de ce point de vue... puisqu'on passe par une transformation de string, et les paramètres doivent y passer à la semoule...
donc je pensais utiliser un Array avec des indices et gérer une fonction evenementielle qui testerait la destruction des evenements....
mais avant, je voulais être sûr qu'il n'y a pas un moyen de transmettre une variable de cette facon... merci d'avance.
