我有两张图片。其中一张是正常的,另一张则着色更多。我想让这张图片显示在另一张上面,并且产生“发光”效果,每秒钟或这样切换透明和不透明状态。我还需要在用户按下特定按钮时停止此效果。我该如何使用jQuery或Javascript实现这个功能?
我有两张图片。其中一张是正常的,另一张则着色更多。我想让这张图片显示在另一张上面,并且产生“发光”效果,每秒钟或这样切换透明和不透明状态。我还需要在用户按下特定按钮时停止此效果。我该如何使用jQuery或Javascript实现这个功能?
HTML:
<button id="stop">STOP IT!</button>
<div class="images">
<img src="img1.jpg" />
<img src="img2.jpg" class="glowed"/>
</div>
var playing = true;
function loop(){
if(playing){
$('.images img:eq(1)').fadeIn(700, function(){
$(this).fadeOut(700,loop);
});
}
}
loop(); // start loop
$('#stop').click(function(){
playing=0;
});
只需将两个图像绝对定位:
.images img{
position:absolute;
}
.glowed{
box-shadow: 0px 0px 30px 2px #cf5
}
我使用了 css3 的盒子阴影,但你也可以使用一个发光的 .png 图片。