ホームページ > 記事 > ウェブフロントエンド > JSモーションで単体オブジェクトの透明度を変更する方法の解析

JSモーションで単体オブジェクトの透明度を変更する方法の解析

韦小宝オリジナル: 2018-01-24 09:56:461354ブラウズ

この記事では、主に単一オブジェクトの透明度を変更するためのJSの動作方法を紹介し、ページ要素の属性の動的変更に関するJSの操作スキルを例の形式で分析します。JavaScriptに興味のある友人は参考にしてください。この記事

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

<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 と他のターゲットが値に値する場合は、タイマーをクリアし、それ以外の場合は変更します。透明度の値のアルファ

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>

上記がこの記事のすべての内容です。皆さんの学習に役立つことを願っています。！

JSモーションで単体オブジェクトの透明度を変更する方法の解析

関連記事