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

韦小宝
リリース: 2018-01-24 09:56:46
オリジナル
1354 人が閲覧しました

この記事では、主に単一オブジェクトの透明度を変更するための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をプラグインにパッケージ化_Canvas統計グラフプラグインの記述例

html、css、javascriptでフロアホッピングページレイアウトを実現

JavaScriptモジュールモードの詳細説明

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!