반응형
마우스를 따라다니는 신사 눈 자바스크립트로 만들기
<script type="text/javascript" src="./js/jquery-1.12.4.js"></script>
<script type="text/javascript">
var balls = document.getElementsByClassName("ball");
document.onmousemove = function () {
var x = event.clientX * 100 / window.innerWidth + "%";
var y = event.clientY * 100 / window.innerHeight + "%";
for (var i = 0; i < 2; i++) {
balls[i].style.left = x;
balls[i].style.top = y;
}
}
</script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript</title>
<link href="./css/eyes.css" style="text/css" rel="stylesheet">
</head>
<body>
<div class="face">
<div class="hair">
<div class="hatfur"></div>
</div>
<div class="eyes">
<div class="eye">
<div class="ball"></div>
</div>
<div class="eye">
<div class="ball"></div>
</div>
<div class="mus"></div>
<div class="mus1"></div>
<div class="mouth"></div>
<div class="mouth1"></div>
</div>
</div>
</body>
</html>body{
margin:0;
padding:0;
background: #34495e;
}
.face{
z-index: 99;
position: absolute;
vertical-align: center;
top:10%;
left:10%;
width: 100%;
text-align: center;
background:#FFE5C2;
border-radius: 30%;;
width: 600px;
height: 800px;
}
.hair{
position: relative;
vertical-align: center;
top:-40px;
left:-10px;
width: 100%;
text-align: center;
background:#2e2a2a;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
width: 620px;
height: 530px;
}
.hatfur{
position: relative;
vertical-align: center;
top:390px;
left:-38px;
width: 100%;
text-align: center;
background:#2e2a2a;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 30%;
border-bottom-right-radius: 30%;
width: 700px;
height: 160px;
}
.eyes{
position: absolute;
top:71%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.eye{
width: 200px;
height: 100px;
background: #ffffff;
margin:40px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
display: inline-block;
position: relative;
overflow: hidden;
}
.ball{
width: 40px;
height: 40px;
background: #000000;
position: absolute;
top:23%;
left:33%;
border-radius: 50%;;
border: 15px solid #333333;
}
.mus{
position: absolute;
width: 160px;
height: 60px;
top: 180px;
left:0px;
background: #333333;
border-radius: 50%;
display: inline-block;
-webkit-transform: rotate(-20deg);
}
.mus1{
position: absolute;
width: 160px;
height: 60px;
top: 180px;
left:440px;
background: #333333;
border-radius: 50%;
display: inline-block;
-webkit-transform: rotate(20deg);
}
.mouth{
z-index: 5;
position: absolute;
background-color: #683232;
width: 100px;
height: 160px;
margin:0 auto;
left:42%;
border-radius: 5%;
}
event.clientX => 브라우저 클라이언트 영역의 좌측상단을 기준으로 측정된 x축 좌표
event.clientY => 브라우저 클라이언트 영역의 좌측상단을 기준으로 측정된 y축 좌표
마우스 스크롤이 되지 않으면 입력한 값과 같은 값을 가지고, 마우스 스크롤이 되면, 스크롤 된 값에 따라 변합니다.
window.innerWidth => 창의 넓이
window.innerHeight => 네비게이션 창을 제외한 높이
근위병 만들려고 하다가 그냥 깜찍한 신사 아저씨로 만들었습니다
디자인은 제 마음대로 ㅎㅎ
반응형
'JavaScript' 카테고리의 다른 글
| [자바스크립트 기초] 함수로 인디언이름 반환하기 (0) | 2020.12.14 |
|---|---|
| 무작위로 6글자 문자열 생성하기 (0) | 2020.12.10 |
| [html/css/javaScript] 자바스크립트로 탭메뉴 만들기 tap menu (0) | 2020.11.24 |
| [html/css] input태그에 글 입력 시 아이콘/이미지 활성화 시키기 (0) | 2020.11.17 |
| [Javascript]기초문법 html/css/jsp 자바스크립트로 구구단 테이블 만들기 (0) | 2020.11.11 |
