CSS3CSS3 et Javascript
Les effets CSS3 et Javascript
Au survol de souris de ce div , largeur et vitesse ce déclanche. Au clic sur le bouton, les effets sont inversé.
Sont utilisées ici des propriétés javascript de l'objet style :
- transitionDuration pour la durée
- transitionProperty pour le type d'effet.
<script type="text/javascript">
function sygo() {
var mondivamoi = document.getElementById('mondiv');
mondivamoi.style.background = '#ffffcc';
mondivamoi.style.width = "100px";
mondivamoi.style.transitionDuration = "2s";
//mondivamoi.style.height = "100px";
//mondivamoi.style.transitionProperty = "height";
}
</script>
<input type="button" onclick="sygo()" value="GoGo"/>
function sygo() {
var mondivamoi = document.getElementById('mondiv');
mondivamoi.style.background = '#ffffcc';
mondivamoi.style.width = "100px";
mondivamoi.style.transitionDuration = "2s";
//mondivamoi.style.height = "100px";
//mondivamoi.style.transitionProperty = "height";
}
</script>
<input type="button" onclick="sygo()" value="GoGo"/>
Les propriétés de l'objet Style transitionDuration et transitionProperty peuvent donc se substituer au CSS3.
