0

私はクライアントのためにプロジェクトを終えようとしています。彼らは彼らのサイトの上部から光るランプをぶら下げたいと思っています。

問題は、IE6 +で動作する必要があることです。そうでない場合は、css3で動作します。

Jqueryでグロー効果をスムーズにする方法を知る必要があります

これまでのところ、JQueryで背景画像のオンとオフを切り替えるという半分の解決策を考え出しました。これはクリスマスライトなどに適していますが、これは私が探している輝きではありません。

    var glow2 = $('.lamp2');
    setInterval(function(){
    glow2.toggleClass('lampglow');
    }, 3000);
4

2 に答える 2

1

このようなものはどうですか？

http://jsfiddle.net/RrZEw/

または、次のようにニーズに合わせて拡張することもできます。

http://jsfiddle.net/RrZEw/1/

クリエイティブに！:)

于 2012-02-17T10:25:32.117 に答える
0

それを理解しました-最終的には非常に簡単です-2つの背景画像がcssでオーバーラップし、不透明度で1つを取り出します

     <div class="lamp1"></div>
     <div class="lamp1 lampglow1"></div>
     <div class="lamp2"></div>
     <div class="lamp2 lampglow2"></div>
     <div class="lamp3"></div>
     <div class="lamp3 lampglow3"></div>

    .lamp1{position:fixed; top:-100px; left:8%; background:url(/assets/img/lamp.png)     no-repeat; width:200px; height:600px;}
    .lamp2{position:fixed; top:-220px; left:5%; background:url(/assets/img/lamp.png) no-repeat; width:200px; height:600px;}
    .lamp3{position:fixed; top:-110px; right:5%; background:url(/assets/img/lamp.png) no-repeat; width:200px; height:600px;}

    .lampglow1{background:url(/assets/img/lampglow.png) no-repeat; width:200px; height:600px;}
    .lampglow2{background:url(/assets/img/lampglow.png) no-repeat; width:200px; height:600px;}
    .lampglow3{background:url(/assets/img/lampglow.png) no-repeat; width:200px; height:600px;}


   $(document).ready(function() {
    function pulsate() {
      $(".lampglow1").animate({opacity: 0.2}, 3000, 'linear')
                .animate({opacity: 1}, 3000, 'linear', pulsate);
       $(".lampglow2").animate({opacity: 0.2}, 5000, 'linear')
                .animate({opacity: 1}, 5000, 'linear', pulsate);
       $(".lampglow3").animate({opacity: 0.2}, 4000, 'linear')
                 .animate({opacity: 1}, 4000, 'linear', pulsate);
    }

    pulsate();
 });
于 2012-02-20T10:11:11.640 に答える