JS motion changes the transparency of a single object, and js Motion Object transparency

JS motion changes the transparency of a single object, and js Motion Object transparency

This article describes how JS motion changes the transparency of a single object. We will share this with you for your reference. The details are as follows:

In addition to changing the width, height, letf, top position, or motion direction of an object, changing the transparency of an object is also a special motion effect.

<script>  window.onload = function () {    var oDiv = document.getElementById('div1');    oDiv.onmousemove = function () {      startMove(100);    }    oDiv.onmouseout = function () {      startMove(30);    }}var timer = null;function startMove(iTarget) {    clearInterval(timer);    var oDiv = document.getElementById('div1');    timer = setInterval(function(){      if(oDiv.offsetAlpha == iTarget){        ....      }    },30);}</script>

However, there are only offsetLeft/Top, offsetWidth/Height methods in js, and there is no offsetAlpha method.

Q: How can we obtain the transparency of the current object ??

We can define a variable var alpha = 30 by ourselves. We can continue our next step by judging whether the variable is equal to the target value;

Var alpha = 30; // customize a variable

When the target such as alpha is worthwhile, the timer is clear; otherwise, the transparency value alpha is changed.

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

The complete code is as follows:

<div id="div1"></div>

Css style section:

<Style> # div1 {width: 100px; height: 100px; background: green; opacity: 0.3; filter: alpha (opacity: 30 ); /* compatible with earlier IE versions */} </style>

Js section:

<script>  window.onload = function () {    var oDiv = document.getElementById('div1');    oDiv.onmousemove = function () {      startMove(100);    }    oDiv.onmouseout = function () {      startMove(30);    }  }  var timer = null;  var alpha = 30;  function startMove(iTarget) {    clearInterval(timer);    var oDiv = document.getElementById('div1');    var iSpeed = 0;    timer = setInterval(function(){      if(alpha>iTarget){        iSpeed = -10;      }else{        iSpeed = 10;      }      if(alpha == iTarget){        clearInterval(timer);      }else{        alpha += iSpeed;        oDiv.style.opacity = alpha/100;        oDiv.style.filter = 'alpha(opacity:'+alpha+')';      }    },30);  }</script>