JavaScript 이미지 전환_javascript 기술을 쉽게 구현
- WBOY원래의
- 2016-05-16 15:20:131326검색
본 글의 예시에서는 자바스크립트 이미지 전환 구현 방법을 소개하고 있으며, 참고용으로 공유합니다
렌더링:
웹 페이지에서는 매우 흔한 사진 전환 효과가 나타납니다. 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>
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>
<!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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.