Comment changer la transparence d'un seul objet dans JS

Cet article présente principalement la méthode de mouvement JS pour modifier la transparence d'un seul objet, et analyse les techniques de fonctionnement pertinentes pour la modification dynamique des attributs des éléments de page sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

.

Cet article donne l'exemple de JS motion Comment changer la transparence d'un seul objet. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

En plus d'obtenir l'effet de mouvement de l'objet en modifiant la largeur, la hauteur, la gauche, la position supérieure ou la direction du mouvement de l'objet, en modifiant la transparence de l'objet est aussi un effet de mouvement spécial

<script>
  window.onload = function () {
    var op = document.getElementById(&#39;p1&#39;);
    op.onmousemove = function () {
      startMove(100);
    }
    op.onmouseout = function () {
      startMove(30);
    }
}
var timer = null;
function startMove(iTarget) {
    clearInterval(timer);
    var op = document.getElementById(&#39;p1&#39;);
    timer = setInterval(function(){
      if(op.offsetAlpha == iTarget){
        ....
      }
    },30);
}
</script>

Mais dans js, il n'y a que quatre méthodes : offsetLeft/Top, offsetWidth/Height, et 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 du temps, 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>

Partie js :

<script>
  window.onload = function () {
    var op = document.getElementById(&#39;p1&#39;);
    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(&#39;p1&#39;);
    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 = &#39;alpha(opacity:&#39;+alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Quelles sont les méthodes pour ajouter de nouveaux attributs d'objets à la séquence de détection en vue ?

Comment obtenir l'effet d'animation consistant à rebondir sur le bord dans jQuery ?

Comment utiliser sass dans vue cli webpack (tutoriel détaillé)

Implémentation de la méthode d'ajout et d'affectation des sous-éléments de balise dans jQuery

Comment générer des nombres aléatoires en JS (tutoriel détaillé)

Comment changer la couleur de la page en JS (tutoriel détaillé)

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!