Explication détaillée des étapes pour manipuler la transparence des objets en JS-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-13 10:58:34

original

1460 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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+')';
}

Copier après la connexion

Le code complet est le suivant :

<p id="p1"></p>

Copier après la connexion

partie de style CSS :

<style>
    #p1{
      width: 100px;height: 100px;
      background: green;
      opacity:0.3;
      filter:alpha(opacity:30);/*兼容低版本IE*/
    }
</style>

Copier après la connexion

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>

Copier après la connexion

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!