Question

我即将为客户完成一个项目，他们希望从他们网站的顶部悬挂发光灯。

问题是，它必须在IE6 +中运行，否则我会在css3中运行

我需要知道如何在Jquery

中平滑地制作发光效果

到目前为止，我已经提出了半个解决方案，让JQuery打开和关闭背景图像 - 这对圣诞灯或其他东西都有好处，但这不是我想要的光芒

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

Answer 1

这样的事情怎么样？

http://jsfiddle.net/RrZEw/

或者您甚至可以增强它以更好地满足您的需求：

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

要有创意！：）

Answer 2

想出来 - 最后非常简单 - 两个背景图像在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();
 });

使用JQuery为灯泡添加发光效果

2 个答案: