JSで単一オブジェクトの透明度を変更する方法-jsチュートリアル-php.cn

JSで単一オブジェクトの透明度を変更する方法

亚连

リリース： 2018-06-09 17:36:51

オリジナル

1723 人が閲覧しました

この記事では、主に単一オブジェクトの透明度を変更するための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の4つのメソッドしかなく、offsetAlphaメソッドはありません。

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 = &#39;alpha(opacity:&#39;+alpha+&#39;)&#39;;
}

ログイン後にコピー

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

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

ログイン後にコピー

上記は、すべての人にとって役立つことを願っています。未来。

Vue の検出シーケンスにオブジェクトの新しい属性を追加する方法は何ですか?

jQuery で端から跳ね返るアニメーション効果を実現するにはどうすればよいですか?

vue cli webpackでsassを使用する方法（詳細なチュートリアル）

jQueryでタグのサブ要素の追加および割り当てメソッドを実装する

JSで乱数を生成する方法（詳細なチュートリアル）

JS でページの色を変更する方法 (詳細なチュートリアル)

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