JS モーションを実装して単一オブジェクトの透明度を変更する方法

この記事では、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;
function startMove(iTarget) {
    clearInterval(timer);
    var op = document.getElementById(&#39;p1&#39;);
    timer = setInterval(function(){
      if(op.offsetAlpha == iTarget){
        ....
      }
    },30);
}
</script>

js には、offsetLeft/Top、offsetWidth/Height、offsetAlpha メソッドの 4 つのメソッドしかありません。

Q: では、現在のオブジェクトの透明度を取得するにはどうすればよいでしょうか? ?

変数 var alpha = 30 を定義できます。この変数がターゲット値と等しいかどうかを判断して、次の操作を続行できます

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

alpha がターゲット値と等しい場合、タイマーをクリアします。それ以外の場合は、透明度の値 alpha を変更するだけです

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

完全なコードは次のとおりです:

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

css スタイル部分:

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

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>

関連する推奨事項。

CSS はどうですか 透明度を設定します

JQUERY を使用して変数の透明度を実装します トップに戻る効果

CSS3 の不透明度を実装するための完全なコード

以上がJS モーションを実装して単一オブジェクトの透明度を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。