How to implement JS motion to change the transparency of a single object

This article mainly introduces the method of JS motion to change the transparency of a single object, and analyzes the relevant operating techniques for dynamic modification of page element attributes in the form of examples. Friends who need it can refer to it. I hope it can help everyone

In addition to passing In addition to changing the width, height, letf, top position or movement direction of the object to achieve the movement effect of the object, changing the transparency of the object is also a movement special effect

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

But in js There are only four methods, offsetLeft/Top and offsetWidth/Height, but there is no offsetAlpha method.

Question: So how do we get the transparency of the current object? ?

We can define a variable var alpha = 30; by judging whether this variable is equal to the target value, we can continue our next operation;

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

When the alpha and other targets are worthy, clear the timer, otherwise change the transparency value alpha

if(alpha == iTarget){
   clearInterval(timer);
}else{
   alpha += iSpeed;
   op.style.opacity = alpha/100;
   op.style.filter = 'alpha(opacity:'+alpha+')';
}

The complete code is as follows:

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

css style part:

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

js part:

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

Related recommendations;

How to set transparency in css

Use JQUERY to achieve variable transparency and return to the top effect

Achieve complete CSS3 opacity Code

The above is the detailed content of How to implement JS motion to change the transparency of a single object. For more information, please follow other related articles on the PHP Chinese website!