728x90
★ 다량의 선 애니메이션
- 해당 선을 커서를 대면 선의 곡율 처럼 효과
■ HTML 코드
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false' onload='init();'>
<div id="box"></div>■ CSS 코드
<style>
.line {
border-top: 1px solid black;
width: 100px;
transition: all 3s;
margin-bottom: 0px;
}
</style>■ JavaScript
<script>
//var colors = [ 'black', 'tomato', 'cornflowerblue', 'gold', 'green' ];
for (var i=0; i<500; i++) {
var line = document.createElement("div");
line.className = "line";
//line.dataset["color"] = 0;
line.onmouseover = function() {
var obj = event.srcElement;
obj.style.width = "100%";
//obj.dataset["color"]++;
//obj.style.borderColor = colors[line.dataset["color"]];
setTimeout(function() {
obj.style.width = "100px";
}, 3000);
};
document.getElementById("box").append(line);
}
</script>■ 실행 결과
■ 시뮬레이션
728x90
'웹페이지' 카테고리의 다른 글
| JAVASCRIPT STEP 57 - 두더지(고양이)잡기 게임 (0) | 2023.04.28 |
|---|---|
| JAVASCRIPT STEP 56 - 이동하는 고양이를 잡기 (0) | 2023.04.28 |
| JAVASCRIPT STEP 54 - 셀 클릭 애니메이션 (0) | 2023.04.28 |
| JAVASCRIPT STEP 53 - 이미지 뷰어 (0) | 2023.04.28 |
| JAVASCRIPT STEP 52 - 사람 애니메이션 (0) | 2023.04.28 |
728x90
★ 다량의 선 애니메이션
- 해당 선을 커서를 대면 선의 곡율 처럼 효과
■ HTML 코드
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false' onload='init();'>
<div id="box"></div>■ CSS 코드
<style>
.line {
border-top: 1px solid black;
width: 100px;
transition: all 3s;
margin-bottom: 0px;
}
</style>■ JavaScript
<script>
//var colors = [ 'black', 'tomato', 'cornflowerblue', 'gold', 'green' ];
for (var i=0; i<500; i++) {
var line = document.createElement("div");
line.className = "line";
//line.dataset["color"] = 0;
line.onmouseover = function() {
var obj = event.srcElement;
obj.style.width = "100%";
//obj.dataset["color"]++;
//obj.style.borderColor = colors[line.dataset["color"]];
setTimeout(function() {
obj.style.width = "100px";
}, 3000);
};
document.getElementById("box").append(line);
}
</script>■ 실행 결과
■ 시뮬레이션
728x90
'웹페이지' 카테고리의 다른 글
| JAVASCRIPT STEP 57 - 두더지(고양이)잡기 게임 (0) | 2023.04.28 |
|---|---|
| JAVASCRIPT STEP 56 - 이동하는 고양이를 잡기 (0) | 2023.04.28 |
| JAVASCRIPT STEP 54 - 셀 클릭 애니메이션 (0) | 2023.04.28 |
| JAVASCRIPT STEP 53 - 이미지 뷰어 (0) | 2023.04.28 |
| JAVASCRIPT STEP 52 - 사람 애니메이션 (0) | 2023.04.28 |
