집 > 기사 > 웹 프론트엔드 > Node.js는 동일한 window_javascript 기술로 사진 탐색을 구현합니다.

Node.js는 동일한 window_javascript 기술로 사진 탐색을 구현합니다.

WBOY원래의: 2016-05-16 16:36:031177검색

동일 창에서 이미지를 탐색하는 방법은 다양합니다. 이번 예시에서는 js를 사용하여 img의 src 속성을 가져온 후 이를 바꾸는 방법을 소개하겠습니다. 이것이 필요한 친구들은 다음을 참고하세요. 🎜>

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  <html> 
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <title>Insert title here</title> 
  <style> 
   
  h1{position:absolute;margin-left:150px;} 
  ul{position:absolute;margin-top:50px;margin-left:80px;} 
  li{float:left;list-style:none;padding:1em;} 
  img{position:absolute;margin-top:100px;margin-left:100px;width:1000px;height:600px;} 
  p{position:absolute;margin-top:800px;margin-left:550px;} 
  </style> 
   
  <script> 
  function showCat(a){ 
    var osrc=a.getAttribute("href"); 
    var oimg=document.getElementById("img1"); 
    oimg.setAttribute("src",osrc); 
   
    var op=document.getElementById("p1"); 
    var otxt=a.getAttribute("title"); 
    op.childNodes[0].nodeValue=otxt;; 
  } 
  </script> 
  </head> 
  <body> 
  <h1>Cat Home</h1> 
  <ul> 
    <li> 
      <a href="img/1.jpg" title="我是白猫咪" onclick="showCat(this);return false;">白猫咪</a> 
    </li> 
    <li> 
      <a href="img/2.jpg" title="我是黑猫咪" onclick="showCat(this);return false;">黑猫咪</a> 
    </li> 
    <li> 
      <a href="img/3.jpg" title="我是花猫咪" onclick="showCat(this);return false;">花猫咪</a> 
    </li> 
  </ul> 
   
  <img id="img1" src="img/4.jpg" alt="猫咪"/> 
  <p id="p1">choose Cat Photo</p> 
   
  </body> 
  </html>

성명：

이전 기사：JS 콜백 함수_javascript 기술 적용의 간단한 예다음 기사：JS 콜백 함수_javascript 기술 적용의 간단한 예

Node.js는 동일한 window_javascript 기술로 사진 탐색을 구현합니다.

관련 기사