Html
    Css
    Js

    
                        
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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

图片拖拽缩放

点击列表动态获取图片地址,渲染图片。
被选中列表项默认底色突出。
判断滚轮滚动方向,扩大图片或缩小图片。
body添加overflow属性,防止图片放大之后页面出现不必要的滚动条。

0