Explication détaillée des étapes pour manipuler la transparence des objets en JS

Cette fois je vais vous donner une explication détaillée des étapes pour manipuler la transparence des objets avec JS Quelles sont les précautions pour manipuler la transparence des objets avec JS Voici un cas pratique, allons-y. jetez un oeil.

En plus de changer la largeur, la hauteur, la gauche, la position supérieure ou la direction du mouvement de l'objet pour obtenir l'effet de mouvement de l'objet, changer la transparence de l'objet est également un effet de mouvement spécial

<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 offsetLeft/Top, offsetWidth/Height, ces quatre méthodes, et il n'y a pas de méthode offsetAlpha.

Question : 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; // 自定义一个变量

Lorsque l'alpha et d'autres objectifs en valent la peine, effacez le 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>

js partie :

<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment implémenter un mouvement multi-objets dans JS

Étapes pour obtenir un effet de défilement transparent avec vue .js Explication détaillée

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!