原文链接：https://www.3mooc.com/front/articleinfo/194
我们在网上经常看到类似下图这种的缩略图相册，其实这个效果用jquery很好实现，主要是熟悉attr()这个方法就好了。
首先我们要先布局html和css
HTML部分：
<h2>
三人行慕课免费赠送课程列表
</h2>
<ul id="imagegallery">
<li><a href="images/11.jpg" title="HTML5/CSS3">
<img src="images/11-small.jpg" width="100" alt=""/>
</a></li>
<li><a href="images/22.jpg" title="jquery">
<img src="images/22-small.jpg" width="100" alt=""/>
</a></li>
<li><a href="images/33.jpg" title="javaScript">
<img src="images/33-small.jpg" width="100" alt=""/>
</a></li>
<li><a href="images/44.jpg" title="Vue">
<img src="images/44-small.jpg" width="100" alt=""/>
</a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px"/>
<p id="des">选择一个图片</p>
/*css部分*/
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
注意设置好图片的title和href属性，我们需要用jq获取和更改属性
jquery代码部分：
script src="images/jquery-1.12.4.js"></script>
<script>
$(function () {
$("#imagegallery a").click(function () {
var href = $(this).attr("href");
$("#image").attr("src", href);
var title = $(this).attr("title");
$("#des").text(title);
return false;
});
});
</script>
用jquery实现这个效果就是这么简单。
网友评论