JavaScript를 이용한 이미지 라이브러리의 기본 기능에 대한 자세한 설명(코드 포함)
- php是最好的语言원래의
- 2018-07-28 16:27:421691검색
js를 사용하여 그림 라이브러리의 기본 기능을 구현하려면: 링크를 클릭하면 다른 창으로 이동하는 대신 이 페이지에 머물면서 사진을 볼 수 있습니다. 링크를 클릭하시면 해당 사진과 본 페이지의 원본 사진 목록을 동시에 보실 수 있습니다. apache php mysql
이미지 갤러리 html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="static/layout.css" media="screen" />
</head>
<body>
<h1>Avengers</h1>
<ul>
<li>
<a href="./images/1.jpg" title="avengers1" onclick="showPic(this); return false;">AAAAR1</a>
</li>
<li>
<a href="./images/2.jpg" title="avengers2" onclick="showPic(this); return false;">AAAAR2</a>
</li>
<li>
<a href="./images/3.jpg" title="avengers3" onclick="showPic(this); return false;">AAAAR3</a>
</li>
<li>
<a href="./images/4.jpg" title="avengers4" onclick="showPic(this); return false;">AAAAR4</a>
</li>
</ul>
<img id="placeholder" src="./images/5.jpg" alt="AAAAR5" />
<p id="description">Choose an image.</p>
<script src="static/showPic.js"></script>
</body>
</html>css 렌더링 파일:
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color:#333;
background-color: transparent;
}
a {
color:#60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style:none;
}
img {
display: block;
clear: both;
}제안 솔루션:
자리 표시자 이미지 방법을 통해 이 홈페이지의 이미지 검색 영역을 예약하세요.
링크를 클릭하면 이 웹페이지의 기본 동작을 가로챕니다.
링크를 클릭하면 자리표시자 이미지를 해당 링크에 해당하는 이미지로 교체하세요.
먼저 자리 표시자로 사진을 선택하세요.
<img id="placeholder" src="./images/5.jpg" alt="AAAAR5" />
자리 표시자 사진을 보려는 사진으로 바꾸려면 src 속성을 변경해야 합니다. js의 setAttribute 함수가 이를 수행할 수 있습니다. 이 기능을 사용하여 js 함수를 작성하여 문제를 해결할 수 있습니다.
function showPic(whichpic)
이 함수는 이미지 변환을 위해 하나의 이미지 링크 매개변수만 허용합니다. 요소 노드로서 whichpic은 getAttribute 함수를 사용하여 href 속성을 가져올 수 있습니다:
var source = whichpic.getAttribute("href");그런 다음 자리 표시자 이미지를 가져옵니다:
var placeholder = document.getElemntById("placeholder");자리 표시자 이미지 개체를 가져온 후 자리 표시자 이미지 개체의 속성, 즉 교체를 설정할 수 있습니다. 해당 이미지.
placeholder.setAttribute("src", source);완전한 기능:
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
}다음 단계는 이 js 기능을 마크업 문서와 결합하는 것입니다.
이벤트 처리 기능: 이벤트 처리 기능의 기능은 특정 이벤트가 발생할 때 특정 js 코드를 호출하는 것입니다.
여기에서는 사용자가 링크를 클릭할 때 작업을 트리거하려고 하므로 onclick 이벤트 핸들러를 사용해야 합니다.
showPic 함수에는 하나의 매개변수, 즉 href 속성이 있는 요소 노드 매개변수가 필요합니다. 여기에서는 현재 레이블 요소를 참조하는 this 키워드를 사용할 수 있습니다.
마찬가지로 링크를 클릭할 때 다른 창으로 이동하는 것을 방지하고 싶기 때문에 링크를 클릭할 때의 기본 동작을 차단하고 js 함수에 의해 트리거되는 이미지 교체 동작만 수행해야 합니다.
여기서 js 함수에 false 반환 값을 추가하면 onclick 함수가 링크가 클릭되지 않은 것으로 간주하여 새 창을 열지 않게 됩니다.
특정 코드:
<a href="./images/1.jpg" title="avengers1" onclick="showPic(this); return false;">AAAAR1</a>
여기서 this 키워드는 요소 노드 를 나타냅니다.
이렇게 하면 사진 라이브러리에 필요한 기능이 완성됩니다.
이 기능 확장:
페이지를 클릭할 때 이미지 설명을 전환하고 싶습니다. 그림 라이브러리 문서의 각 그림에는 제목 속성이 있습니다.
var text = whichpic.getAttribute("title");제목 속성을 먼저 가져온 다음 바꾸세요.
childNodes 속성: 모든 요소의 모든 하위 요소를 가져오는 데 사용할 수 있습니다.
body 요소의 모든 자식 요소를 추출해야 한다고 가정합니다. body에 몇 개의 자식 요소가 있는지 확인하세요.
var body_element = document.getElementsByTagName = ("body")[0];
alert(body_element.childNodes.length);[0]은 배열의 첫 번째(유일한) 본문 요소를 얻음을 의미합니다.
childNodes 속성에 의해 반환된 배열에는 요소 노드뿐만 아니라 모든 유형의 노드가 포함됩니다. 실제로 문서의 거의 모든 것이 노드입니다. 따라서 반환되는 값은 매우 큽니다.
nodeType 속성: nodeType 속성을 사용하여 해당 노드를 찾습니다. 그러나 nodeType의 반환 값은 영어가 아닙니다.
element 노드는 2를 반환하고
text 노드는 3을 반환합니다.
추가할 기능으로 돌아가기: 먼저 그림에 좋아요를 누르고 텍스트 설명을 위한 자리 표시자를 추가하고 id 속성
alert(body_element.nodeType);
을 설정한 다음 그림 아래에 배치합니다. 다음으로 그림 제목이 텍스트 내용을 대체하도록 합니다. :
<p id="description">Choose an image.</p>
nodeValue 속성: 텍스트 노드의 값을 변경하려면 DOM 메소드의 nodeValue 속성을 사용해야 합니다.
이 예에서 p 요소에 포함된 텍스트 노드는
요소의 첫 번째 하위 노드이므로 얻어야 하는 것은 첫 번째 하위 노드의 nodeValue 속성 값입니다.
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");firstChild 및 lastChild 값
childNodes[0]은 firstChild로 대체될 수 있으며, 마지막 하위 노드는 lastChild로 표시됩니다.
마지막으로 nodeValue를 사용하여 텍스트를 새로 고칩니다.
전체 코드:
alert(description.childNodes[0].nodeValue);
텍스트 값을
요소의 텍스트 노드에 전달하면 목표가 달성됩니다.
페이지 효과:
JavaScript는 Pinterest를 모방하여 이미지 미리 로드 기능을 구현합니다.
자바스크립트 사용 -Li Yanhui 자바스크립트 비디오 튜토리얼위 내용은 JavaScript를 이용한 이미지 라이브러리의 기본 기능에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!