JSでオブジェクトの透明度を操作する手順を詳しく解説-jsチュートリアル-php.cn

JSでオブジェクトの透明度を操作する手順を詳しく解説

php中世界最好的语言

リリース： 2018-04-13 10:58:34

オリジナル

1460 人が閲覧しました

今回はJSでオブジェクトの透明度を操作する手順について詳しく解説していきます。 JSでオブジェクトの透明度を操作する際の注意点を実際に見てみましょう。

オブジェクトの幅、高さ、レット、上部の位置、または移動方向を変更してオブジェクトの移動効果を実現することに加えて、オブジェクトの透明度を変更することも特別な移動効果です

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

ログイン後にコピー

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

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

変数を自分で定義できます var alpha = 30; この変数がターゲット値と等しいかどうかを判断して、次の操作を続行できます。アルファやその他の目標に価値がある場合は、

タイマー

をクリアします。そうでない場合は、透明度の値 alpha

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

ログイン後にコピー

を変更します完全なコードは次のとおりです:

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

ログイン後にコピー

CSS スタイル部分:

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

ログイン後にコピー

js 部分:

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

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS でマルチオブジェクトの動きを実装する方法

vue.js シームレスなスクロール効果を実現する手順の詳細な説明

以上がJSでオブジェクトの透明度を操作する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。