实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册</title>
<style>
.box{
width: 600px;
height:800px;
border: 1px solid skyblue;
/*阴影*/
box-shadow: 3px 3px 5px skyblue;
text-align: center;
}
.box h2{
color: deepskyblue;
}
.box ul{
padding:0;
margin: 0;
overflow: hidden; /*UL元素转为BFC，使他们不受内部浮动影像*/
}
.box ul li{
/*去掉li的小圆点*/
list-style-type: none;
/*width:80px;*/
font-size: 20px;
color: #ff33d3;
display: inline-block;
background: 1px lightgreen;
float: left;
margin-left: 15px;
}
.box ul li a {
width:80px;
height: 40px;
/*去掉下划线*/
text-decoration: none;
color: white;
/*转化为快级元素，可以用line-height*/
display: block;
line-height: 40px;
}
/*鼠标悬停*/
.box ul li:hover {
font-size:1.2em;
background-color: lightseagreen;
}
/*鼠标点击按钮*/
.active {
font-size:1.1em;
background-color: lightseagreen;
}
.box .pic{
border: 1px solid lightgray;
width: 580px;
height: 500px;
/*float: left;*/
margin: 30px auto;
}
.box .pic #img{
width:100%;
height:100%;
/*border: 1px solid lightsalmon;*/
}
</style>
</head>
<body>
<!--相册外框-->
<div class="box">
<h2>我的相册</h2>
<!--上部按钮-->
<ul>
<li><a href="img/hu.jpg" title="小乔流水人家">小桥流水</a></li>
<li><a href="img/yinghua.jpg" title="青龙寺樱花树">樱花树木</a></li>
<li><a href="img/youcai.jpg" title="汉中油菜花">油菜花花</a></li>
<li><a href="img/shan.jpg" title="汉中大青山">青山绿水</a></li>
<li><a href="img/qiao.jpg" title="别墅">房屋小湖</a></li>
<li><a href="img/gengzuo.jpg" title="辛勤的农民">田间耕作</a></li>
</ul>
<!-- 图片-->
<div class="pic">
<img src="img/zwt.png" alt="" id="img">
</div>
<!--下部信息-->
<p id="info"></p>
</div>
<script>
//获取所有a标签,导航栏
var a=document.getElementsByTagName('a');
var pic=document.getElementsByClassName('pic');
//获取图片ID
var img=document.getElementById('img');
var info=document.getElementById('info');
for(var i=0;i<a.length;i++) {
a[i].onclick = function () {
// 添加用户选择锁定功能: 指示出当前用户的选项
// this.classList.add('active');
// this.classList.remove('active');
for (var k = 0; k < a.length; k++) {
a[k].classList.remove('active');
}
this.classList.add('active');
//1.获取到要替换的明星图片与简介信息
var picUrl = this.href;
var picInfo = this.title;
var picName = this.innerHTML;
//将对应的图像与信息占位符进行替换
img.src = picUrl;
info.innerHTML = '<span style="color:coral">'+picName+':'+picInfo+'</span>';
return false;
};
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例