Analyse de la méthode de modification de la transparence d'un seul objet avec JS motion-js tutoriel-php.cn

Analyse de la méthode de modification de la transparence d'un seul objet avec JS motion

韦小宝

Libérer： 2018-01-24 09:56:46

original

1369 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 compétences opérationnelles JS liées à la modification dynamique des attributs des éléments de page sous forme d'exemples Amis intéressés par JavaScript. pouvez vous référer à cet article Article

En plus d'obtenir des effets de mouvement d'objet en modifiant la largeur, la hauteur, la gauche, la position supérieure ou la direction du mouvement de l'objet, changer la transparence de l'objet est également une fonction spéciale effet de mouvement

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

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

Quand alpha et autres cibles ; valent le temps, effacez 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

Ce qui précède est tout le contenu de cet article, j'espère que cela pourra aider tout le monde à apprendre ! !

Recommandations associées :

js emballé dans un plug-in_Canvas exemple d'écriture de plug-in de graphique statistique

html, css, javascript pour réaliser le saut au sol Mise en page

Explication détaillée du mode module JavaScript

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!