收藏
批改状态：未批改
老师批语：
下面将展示相册案例代码和效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册实战</title>
<link rel="stylesheet" href="static/demo1.css">
</head>
<body>
<div class="box">
<h3>明星相册</h3>
<ul>
<li>
<a href="images/boy.jpeg" title="1">A</a>
</li>
<li>
<a href="images/fbb.jpg" title="2">B</a>
</li>
<li>
<a href="images/xln.jpg" title="3">C</a>
</li>
<li>
<a href="images/zly.jpg" title="4">D</a>
</li>
</ul>
<div class="pic">
<img src="images/zwt.png" alt="" id="img">
</div>
<p id="info"></p>
</div>
<script>
var pic=document.getElementsByTagName('a');
var img=document.getElementById('img');
var p =document.getElementById('info');
for (var i=0;i<pic.length;i++){
pic[i].onclick=function () {
for(var i=0;i<pic.length;i++){
pic[i].classList.remove('active')
}
this.classList.add('active');
var picUrl = this.href;
var picInfo=this.title;
var picName=this.innerHTML;
img.src=picUrl;
p.innerHTML=picName;
return false;
};
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
下方是CSS样式：
.box{
width: 500px;
height:700px;
background-color: #efefef;
border: 1px solid lightgray;
text-align: center;
margin:20px auto;
color: #636363;
box-shadow: 2px 2px 2px #999;
}
.box ul{
margin: 0;
padding: 0;
overflow: hidden;
}
.box ul li{
list-style: none;
float: left;
background-color: skyblue;
margin-left: 20px;
}
.box ul li a {
display: block;
width: 100px;
height: 40px;
line-height: 40px;
color: white;
text-decoration: none;
}
.box ul li:hover{
font-size:1.2em;
background-color: coral;
}
.active {
font-size:1.2em;
background-color: coral;
}
.box .pic {
width: 450px;
height: 450px;
border: 1px solid lightgray;
margin: 50px auto 0;
}
.box .pic img{
width: 100%;
height: 100%;
}点击 "运行实例" 按钮查看在线实例
上面运用了基本CSS样式和布局 以及选择器、JS选中节点 或者图片地址 内容等。
2. 这次学到了JS中常见用到的获取节点数据等 如利用 document.getElementsByTagName()获取元素及 ById
for循环遍历
图片地址的替换 等。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
