js 학습 노트(이벤트 사례)
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<style type="text/css">
.box{
width: 1200px;
margin: 0 auto;
}
style>
head>
<body>
<div class="box">
<img src="image/qh.01.jpg" id="img1" width="500" height="500">
<p>p>
<button id="prev"> button>
<button id="next"> button>
div>
<script>
window.onload = function (ev) {
var img1 = document.getElementById('img1');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
//
var count = 1; // 1、2···· ,
var minimg = 1 ,maximg = 4;
prev.onclick = function (ev1) {
if (count === minimg){
count = maximg;
}
else {
count--;
}
img1.setAttribute('src','image/qh.0' + count + '.jpg');
};
next.onclick = function (ev1) {
if (count === maximg){
count = minimg;
}
else {
count++;
}
img1.setAttribute('src','image/qh.0' + count + '.jpg');
}
}
script>
body>
html>
사례 2: 광고 중단
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<style type="text/css">
.box{
position: relative;
width: 250px;
}
.close{
position: absolute;
right: 0px;
top: 0px;
}
style>
head>
<body>
<div class="box">
<img src="image/000.jpg" width="250" id="img1">
<img src="image/qh.04.jpg" width="50" class="close" id="img2">
div>
<script>
window.onload = function (ev) {
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
img2.onclick = function (ev1) {
//this.parentNode.remove(); // box
this.parentNode.style.display = 'none'; // css
}
}
script>
body>
html>
사례 3: 풍경 앨범
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<style type="text/css">
.box{
margin: 0 auto;
position: relative;
}
.fj{
list-style: none;
width: 400px;
}
.fj li{
float: left;
width: 100px;
}
style>
head>
<body>
<div class="box">
<p id="des"> p>
<img src="image/qh.01.jpg" width="400" id="img1">
<ul class="fj" id="fjj">
<li>
<a href="image/qh.01.jpg" title=" ">
<img src="image/qh.01.jpg" width="100" alt=" ">
a>
li>
<li>
<a href="image/qh.02.jpg" title=" ">
<img src="image/qh.02.jpg" width="100" alt=" ">
a>
li>
<li>
<a href="image/qh.03.jpg" title=" ">
<img src="image/qh.03.jpg" width="100" alt=" ">
a>
li>
<li>
<a href="image/qh.04.jpg" title=" ">
<img src="image/qh.04.jpg" width="100" alt=" ">
a>
li>
ul>
div>
<script>
window.onload = function (ev) {
var des = document.getElementById('des');
var img1 = document.getElementById('img1');
var fj = document.getElementById('fjj');
var alist = fj.getElementsByTagName('a');// fj a
for (var i = 0; i < alist.length ;i ++){
var a = alist[i];
a.onclick = function (ev1) {
des.innerText = this.title;
img1.setAttribute('src',this.href);
return false;// a , href
}
}
}
script>
사례 4: 아이콘 전환 마우스 이벤트
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
head>
<body>
<img src="image/000.jpg" width="250">
<script>
window.onload = function (ev) {
var img1 = document.getElementsByTagName('img')[0];
// ,.onmouseover
img1.onmouseover = function (ev1) {
this.setAttribute('src','image/77_WPS1 .png');
};
// ,.onmouseout
img1.onmouseout = function (ev1) {
this.setAttribute('src','image/77_WPS .png');
};
// ,.onmousemove
// img1.onmousemove = function (ev1) {
// this.setAttribute('src','image/000.jpg');
// }
}
script>
body>
html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.