Maison > Article > interface Web > Analyse de la méthode de modification de la transparence d'un seul objet avec JS motion
Cet article présente principalement la méthode de mouvement JS pour modifier la transparence d'un seul objet et analyse les compétences opérationnelles JS liées à la modification dynamique des attributs des éléments de page sous forme d'exemples Amis intéressés par JavaScript. pouvez vous référer à cet article Article
En plus d'obtenir des effets de mouvement d'objet en modifiant la largeur, la hauteur, la gauche, la position supérieure ou la direction du mouvement de l'objet, changer la transparence de l'objet est également une fonction spéciale effet de mouvement
<script> window.onload = function () { var op = document.getElementById('p1'); op.onmousemove = function () { startMove(100); } op.onmouseout = function () { startMove(30); } } var timer = null; function startMove(iTarget) { clearInterval(timer); var op = document.getElementById('p1'); timer = setInterval(function(){ if(op.offsetAlpha == iTarget){ .... } },30); } </script>
Mais dans js, il n'y a que quatre méthodes, offsetLeft/Top et offsetWidth/Height, mais il n'y a pas de méthode offsetAlpha.
Q : Alors, comment obtenir la transparence de l'objet actuel ? ?
Nous pouvons définir nous-mêmes une variable var alpha = 30 ; en jugeant si cette variable est égale à la valeur cible, nous pouvons continuer notre prochaine opération
var alpha = 30; // 自定义一个变量
Quand alpha et autres cibles ; valent le temps, effacez timer , sinon changez la valeur de transparence alpha
if(alpha == iTarget){ clearInterval(timer); }else{ alpha += iSpeed; op.style.opacity = alpha/100; op.style.filter = 'alpha(opacity:'+alpha+')'; }
Le code complet est le suivant :
<p id="p1"></p>
partie de style CSS :
<style> #p1{ width: 100px;height: 100px; background: green; opacity:0.3; filter:alpha(opacity:30);/*兼容低版本IE*/ } </style>
partie js :
<script> window.onload = function () { var op = document.getElementById('p1'); op.onmousemove = function () { startMove(100); } op.onmouseout = function () { startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget) { clearInterval(timer); var op = document.getElementById('p1'); var iSpeed = 0; timer = setInterval(function(){ if(alpha>iTarget){ iSpeed = -10; }else{ iSpeed = 10; } if(alpha == iTarget){ clearInterval(timer); }else{ alpha += iSpeed; op.style.opacity = alpha/100; op.style.filter = 'alpha(opacity:'+alpha+')'; } },30); } </script>
Ce qui précède est tout le contenu de cet article, j'espère que cela pourra aider tout le monde à apprendre ! !
Recommandations associées :
js emballé dans un plug-in_Canvas exemple d'écriture de plug-in de graphique statistique
html, css, javascript pour réaliser le saut au sol Mise en page
Explication détaillée du mode module JavaScript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!