1.javascript实现的效果
循环浏览所有图像,并为每个图像插入一个元素thumb-bar,将图像嵌入页面中。
将onclick处理程序附加到每个内部,thumb-bar
以便在单击它们时在displayed-img 元素中显示相应的图像。
将onclick处理程序附加到,以便在单击该处理程序时将变暗效果应用于完整尺寸的图像。再次单击它时,再次消除了暗化效果。
2、html、css和javascript协作实现
手动实现了html、css和javascript协作,对关键的部分写了代码注释
2.1、html
照片库照片库示例
变暗
2.2 、cssh1 {
font-family: sans-serif;
text-align: center;
}
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
.overlay {
position: absolute;