Comment implémenter le mouvement JS pour modifier la transparence d'un seul objet

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 qui en ont besoin peuvent s'y référer. j'espère que cela pourra aider tout le monde

En plus de passer 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 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 et offsetWidth/Height, mais il n'y a pas de méthode offsetAlpha.

Q : Alors, comment obtenir la transparence de l'objet actuel ? ?

On peut définir une variable var alpha = 30 ; en jugeant si cette variable est égale à la valeur cible, on peut continuer notre prochaine opération ;

var alpha = 30; // 自定义一个变量

Quand l'alpha et les 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>

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>

Recommandations associées ;

Comment définir la transparence en CSS

Utiliser JQUERY pour obtenir un effet de retour en haut de la transparence variable

Code complet pour implémenter l'opacité CSS3

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!