JavaScript 이미지 전환_javascript 기술을 쉽게 구현-JS 튜토리얼-php.cn

JavaScript 이미지 전환_javascript 기술을 쉽게 구현

WBOY

풀어 주다： 2016-05-16 15:20:13

원래의

1314명이 탐색했습니다.

본 글의 예시에서는 자바스크립트 이미지 전환 구현 방법을 소개하고 있으며, 참고용으로 공유합니다

렌더링:

웹 페이지에서는 매우 흔한 사진 전환 효과가 나타납니다. Taobao, JD 등에서 쇼핑할 때 제품을 소개하는 여러 장의 사진이 표시되며 일반적으로 마우스를 누르면 아래에 작은 사진이 한 줄로 표시됩니다. 작은 사진에 배치하면 사진이 더 커집니다. 아래에 vivo X5M 모바일 4G 휴대폰을 참고하세요.

1. getElementById()

이 방법은 dom을 조작하는 매우 일반적인 방법입니다. 예를 들어 p 태그가 있고 id가 pid로 설정된 경우 getElementById("pid")를 통해 해당 요소를 조작할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <script type="text/javascript">
    function changeText(){
      document.getElementById("pid").innerHTML
      ="It works!";
    }
  </script>
</head>
<body>
  <p id="pid" onmouseover="changeText()">Hello word!</p>
</body>
</html>

로그인 후 복사

위 코드에서는 본문에 p 태그가 작성되어 있으며, id는 pid입니다. p 태그 위에 마우스를 올리면 onmouseover 이벤트가 발생하고, 문서를 변경하기 위해 ChangeText() 메서드가 실행됩니다. p 태그에

2. setAttribute() 및 getAttribute()

getAttribute() 메소드는 특정 속성의 값을 가져오는 데 사용되며, setAttribute() 메소드는 특정 속성에 값을 할당하는 데 사용됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <script type="text/javascript">
    function changeUrl(){
      var baiduurl=document.getElementById("aid");
      baiduurl.getAttribute("href");
      baiduurl.setAttribute("href", 
      "http://www.taobao.com");
      baiduurl.innerHTML="淘宝";
    }
  </script>
</head>
<body>
  <a href="http://www.baidu.com" id="aid" onmouseover="changeUrl()">百度首页</a>
</body>
</html>

로그인 후 복사

위 코드에는 본문에 a 태그가 있습니다. a 태그는 baiduurl.getAttribute("href") 값이 baiduurl.setAttribute("를 통해 얻어집니다. href", "http: //www.taobao.com") 설정 후 속성 값이 변경됩니다. 전체 코드:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>on</title>
  <style type="text/css" media="screen">
  *{
     padding: 0;
  }
  body{
     font-family: 微软雅黑;
  }
  #imgbox{
        width: 320px;
        height: 490px;
        padding: 10px;
        box-shadow: 5px;
        border: 1px solid #ccc;
        border-radius: 10px;
      }
 #JavaScript 이미지 전환_javascript 기술을 쉽게 구현img{
       padding: 10px;
       border-color: 1px solid #cccccc;
    }

  </style>


</head>
<body>
   <div id="imgbox">
    <img src="images/JavaScript 이미지 전환_javascript 기술을 쉽게 구현1.jpg"    style="max-width:90%"  style="max-width:90%" alt="JavaScript 이미지 전환_javascript 기술을 쉽게 구현" id="JavaScript 이미지 전환_javascript 기술을 쉽게 구현img">   
    <p id="decimg">JavaScript 이미지 전환_javascript 기술을 쉽게 구현 image1</p>
   </div>

   <table>
    <tbody>
      <tr>
        <td width="50px">
          <img src="images/JavaScript 이미지 전환_javascript 기술을 쉽게 구현2.jpg"    style="max-width:90%"  style="max-width:90%" title="JavaScript 이미지 전환_javascript 기술을 쉽게 구현 image2" alt="" onmouseover="changeImg(this)" ></td>
        <td width="50px">
          <img src="images/JavaScript 이미지 전환_javascript 기술을 쉽게 구현3.jpg"    style="max-width:90%"  style="max-width:90%" title="JavaScript 이미지 전환_javascript 기술을 쉽게 구현 image3" alt=""onmouseover="changeImg(this)" ></td>
        <td width="50px">
          <img src="images/JavaScript 이미지 전환_javascript 기술을 쉽게 구현4.jpg"    style="max-width:90%"  style="max-width:90%" title="JavaScript 이미지 전환_javascript 기술을 쉽게 구현 image4" alt=""onmouseover="changeImg(this)" ></td>
        <td width="50px">
          <img src="images/JavaScript 이미지 전환_javascript 기술을 쉽게 구현5.jpg"    style="max-width:90%"  style="max-width:90%" title="JavaScript 이미지 전환_javascript 기술을 쉽게 구현 image5" alt=""onmouseover="changeImg(this)" ></td>

      </tr>
    </tbody>
   </table>

   <script type="text/javascript">
     function changeImg(whichpic){       
         var imgattr=whichpic.getAttribute("src");
         var JavaScript 이미지 전환_javascript 기술을 쉽게 구현img=document.getElementById("JavaScript 이미지 전환_javascript 기술을 쉽게 구현img");
         JavaScript 이미지 전환_javascript 기술을 쉽게 구현img.setAttribute("src",imgattr);
         var dectext=whichpic.getAttribute("title");
         document.getElementById("decimg").innerHTML=dectext;
     }
   </script>
</body>
</html>

로그인 후 복사

다음 단계는 부분 확대를 얻는 방법을 배우는 것입니다. 좋은 방법이 있습니까? 우리는 함께 논의할 수 있습니다.