body {
margin:0;
padding:15px;
height:100%;
overflow:hidden;
background-color:#000;
color:#fff;
}
html {
height:100%;
}
#container {
width:100%;
height:100%;
z-index:1;
}
.imgblock {
z-index:100;
position:absolute;
left:15px;
top:110px;
/* background:rgba(255,255,255,.5);
*/
border-radius:5px;
border:1px solid #ccc;
}
.imgblock .left {
float:left;
width:130px;
padding:10px;
font-weight:bolder;
line-height:30px;
}
.imgblock .left .list {
padding-left:10px;
cursor:pointer;
}
.imgblock .right {
float:left;
padding:10px;
}
.imgblock .right .rblist {
cursor:pointer;
}
.imgblock .right .rb1 {
display:none;
}
.imgblock .right .rb2 {
display:none;
}
.imgblock .right .rb3 {
display:none;
}
.imgfloat {
width:600px;
height:400px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:100;
display:none;
}
点击列表动态获取图片地址,渲染图片。
被选中列表项默认底色突出。
判断滚轮滚动方向,扩大图片或缩小图片。
body添加overflow属性,防止图片放大之后页面出现不必要的滚动条。