1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.img1{
margin: 40px;
}
#div1{
margin-top: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="div1">
<img src="img/picture-1.jpg"/>
</div>
<div id="div2">
<img class="img1" src="img/thumb-1.jpg"/>
<img class="img1" src="img/thumb-2.jpg"/>
<img class="img1" src="img/thumb-3.jpg"/>
</div>
<script type="text/javascript">
//獲取div1的節(jié)點
div1Node = document.getElementById('div1')
//獲取div2中的所有img
imgNodes = document.getElementsByClassName('img1')
for(x=0;x<imgNodes.length;x++){
if(x == 0){
imgNodes[x].onmouseover = function(){
//給頁面賦值為空
div1Node.innerHTML = ''
//創(chuàng)建一個img節(jié)點
imgNode = document.createElement('img')
//更換圖片地址
imgNode.src = "img/picture-1.jpg"
div1Node.appendChild(imgNode)
}
}
if(x == 1){
imgNodes[x].onmouseover = function(){
div1Node.innerHTML = ''
//創(chuàng)建一個img節(jié)點
imgNode = document.createElement('img')
//更換圖片地址
imgNode.src = 'img/picture-2.jpg'
//添加到節(jié)點div1中去
div1Node.appendChild(imgNode)
}
}
if(x == 2){
imgNodes[x].onmouseover = function(){
div1Node.innerHTML = ''
//創(chuàng)建一個節(jié)點
imgNode = document.createElement('img')
//更換圖片
imgNode.src = 'img/picture-3.jpg'
//添加到節(jié)點中去
div1Node.appendChild(imgNode)
}
}
}
</script>
</body>
</html>
結(jié)果：
image.png
