图片闪烁
功能:
点击按钮,实现图片闪烁
效果如图:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片闪烁</title>
</head>
<body>
<button id="flash" style=" background: mediumvioletred; color: aqua; height: 40px;">图片闪烁</button>
<img id="img" src="img/BJN1.jpg" >
</body>
<script type="text/javascript">
var img =document.getElementById("img");
var flash_btn = document.getElementById("flash");
//设置按钮触发事件
flash_btn.addEventListener("click",function(){
//调用setInterval()函数,每隔0.25秒隐藏
setInterval(function(){
img.style.opacity = 0; //图片隐藏
},250)
//再次调用setInterval()函数,每隔0.5秒显示 时间差就可以形成图片闪烁功能;
setInterval(function(){
img.style.opacity = 1; //图片显示
},500)
})
</script>
</html>