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

想通了 - 最后很简单 - 两个背景图像在 css 中重叠，然后用不透明度取出一个

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