html藉助JS簡單實現圖片閃爍功能

圖片閃爍

功能:

 點擊按鈕,實現圖片閃爍

效果如圖:

 

 

 

 

代碼如下:

<!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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章