Comment implémenter le mouvement JS pour modifier la transparence d'un seul objet-js tutoriel-php.cn

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

小云云

Libérer： 2018-01-24 09:06:06

original

1214 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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 = &#39;alpha(opacity:&#39;+alpha+&#39;)&#39;;
}

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

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>

Copier après la connexion

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!