day6-homework
2018-12-10 本文已影响0人
2ez4ddf
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#top{
height: 100px;
width: 800px;
/*background-color: blue;*/
margin-left: 80px;
margin-top: 30px;
margin-bottom: 20px;
}
#top img{
float: left;
height: 100px;
width: 24%;
margin-right: 1%;
border: none;
}
#middle{
height: 300px;
width: 800px;
background-color: violet;
margin-left: 80px;
}
#middle img{
height: 300px;
width: 800px;
}
#bottom{
margin-left: 80px;
width: 800px;
height: 100px;
background-color: orange;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="top">
<!--<img style="" src="img/01.jpg"/ onclick="enlarge()">-->
<!--<img src="img/02.jpg"/ onclick="enlarge()">-->
<!--<img src="img/03.jpg"/ onclick="enlarge()">-->
<!--<img src="img/04.jpg"/ onclick="enlarge()">-->
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
</body>
</html>
<script type="text/javascript">
function enlarge(){
var mySrc = this.src
// var imgId = this.src
// var imgId = this.parentElement.id
console.log(this,mySrc)
var imgNode1 = document.createElement('img')
imgNode1.src = mySrc
// var nameNode = this.name
var nameNode = document.createElement('p')
nameNode.innerText = this.name
// console.log(imgNode1.name)
//// var imgNode1 = document.getElementsByTagName(this.id)
var middleNode = document.getElementById('middle')
middleNode.innerHTML = null
var bottomNode = document.getElementById('bottom')
bottomNode.innerHTML = null
bottomNode.appendChild(nameNode)
//// console.log(imgNode1,middleNode)
middleNode.appendChild(imgNode1)
}
</script>
<script type="text/javascript">
function image(src1){
var topNode = document.getElementById('top')
var imgNode = document.createElement('img')
imgNode.src = src1
imgNode.onclick = enlarge
imgNode.id = src1+'id'
imgNode.name = src1
console.log(imgNode,imgNode.id)
topNode.appendChild(imgNode)
return
}
var imgArray = ["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg"]
for(index in imgArray){
image(imgArray[index])
}
</script>
