我有两个图像.一种是正常的,另一种是彩色的.我希望此图像显示在另一个图像的上方,并具有“发光”效果,该效果每秒钟左右在透明和不透明之间切换.当用户按下特定按钮时,我还需要停止这种效果.我将如何使用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图像代替.