<!doctype html>
<html>
<meta charset="utf-8">
<title>照片查看器</title>
/*基础样式一定要记得清除，或者会对布局造成影响。*/
/*样式的设置根据自己的素材及布局来设置。*/
<style>
*{
margin:0;
padding:0;
}
#box{
width:600px;height:300px;margin:100 auto;position:relative;
}
#box ul li{
width:200px;
height:150px;
list-style:none;
}
#box ul li img{
width:200px;
height:150px;
float:left;
}
.mark{
width:600px;
height:300px;
background-color:#000;
opacity:0.5;
}
.pho{
widht:400px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
}
.close{
width:25px;
height:25px;
background-color:red;
text-align:center;
position:absolute;
left:500px;
top:50px;
cursor:pointer;
}
</style>
<body>
<div id="box">
<ul>
<li><img src="img/1.jpg "></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
</ul>
</div>
<script>
//先获取元素
var box=document.getElementById("box");
var lis=document.getElementsByTagName('li');
//遍历li中的图片
for(var i=0,len=lis.length;i<len;i++){
lis[i].onclick=function(){
//创建一个新层，设为模糊。
var newDiv=document.createElement('div').
newDiv.className='mark';
//追加到box中
box.appendChild(newDiv);
//创建新的图片层，找到src属性，追加到box中。
var newImg=document.createElement('img');
newImg.className='pho';
newImg.src=this.firstChild.getAttruibute('src');
box.appendChild(newImg);
//创建一个关闭span。
var newSpan=document.createElement(''span');
newSpan.className='close';
box.appendChild(newSpan);
//关闭图层
newSpan.onclick=function(){
box.removeChild(newDiv);
box.removeChild(newImg);
box.removeChild(newSpan);
}
}
}
</script>
</body>
</html>
- 还没有人评论，欢迎说说您的想法！
客服
