How to change the transparency of a single object in JS

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 in need can refer to it

The examples in this article describe JS motion How to change the transparency of a single object. Share it with everyone for your reference, the details are as follows:

In addition to achieving the object movement effect by changing the width, height, letf, top position or movement direction of the object, changing the transparency of the object is also a special movement 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, offsetWidth/Height, and 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 alpha and other goals are worth it, 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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

What are the methods to add new properties of objects to the detection sequence in vue?

How to achieve the animation effect of bouncing off the edge in jQuery?

How to use sass in vue cli webpack (detailed tutorial)

Implement the method of adding and assigning tag sub-elements in jQuery

How to generate random numbers in JS (detailed tutorial)

How to change the page color in JS (detailed tutorial)

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