[21.10.13] exam12(02

JAVA_EE/JQuery

[21.10.13] exam12(02_jQueryEvent)

luvforjunk 2021. 10. 14. 09:34

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/scroll.css">
</head>
<body>
<div class="gradientStyle">
   <h1>스크롤 이벤트</h1>
   <div id="console">없지롱~~</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$(window).scroll(function(){
		$("#console").html("스크롤이 이동되었습니다.");
		
		setTimout(function(){
			$("#console").html(""); //3초 뒤에 #console 초기화
		}, 3000);
	});
});
</script>
</body>
</html>

@charset "UTF-8";
* {
   padding: 0;
   margin: 0;
}

div {
   height: 1000px;
}

.gradientStyle {
   /* IE */
   background-image: -ms-linear-gradient(top, #1E5799 0%, #FFFFFF 100%);
   /* Chrome */
   background-image: -webkit-linear-gradient(top, #1E5799 0%, #FFFFFF 100%);
}

#console {
   position: fixed;
   width: 300px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   left: 50%;
   margin-left: -150px;
   top: 50%;
   margin-top: -25px;
   color: red;
   font-size: 20px;
   font-weight: bold;
}

728x90