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属性,防止图片放大之后页面出现不必要的滚动条。