body {
position:relative;
}
* {
margin:0;
padding:0;
list-style:none;
}
.wrapper {
position:relative;
border:1px solid #333;
padding:20px;
margin:10px 10px 10px;
width:600px;
height:350px;
}
.gotop {
cursor:pointer;
display:block;
margin-left:9px;
}
.gobottom {
cursor:pointer;
display:block;
margin-left:9px;
}
.wrapper .smallBox {
height:350px;
width:92px;
float:left;
}
.wrapper .smallBox li {
width:72px;
margin-bottom:5px;
cursor:pointer;
}
.wrapper .smallBox li img {
cursor:pointer;
display:block;
width:68px;
padding:1px;
border:1px solid #ccc;
height:52px;
}
.wrapper #Box {
height:320px;
width:500px;
position:relative;
border:1px solid gray;
float:left;
cursor:crosshair;
}
.wrapper #bigBox {
height:300px;
width:300px;
position:absolute;
top:20px;
left:640px;
overflow:hidden;
display:none;
border:1px solid gray;
}
#Box img {
position:relative;
width:100%;
height:100%;
/* height:300px;
width:400px;
*/
}
#Box #lay {
background:#fff;
border:1px solid gray;
position:absolute;
top:0;
left:0;
opacity:0.5;
display:none;
filter:alpha(opacity=50);
}
.box_wrapper {
height:300px;
margin:10px;
overflow:hidden;
position:relative
}
.box_wrapper ul {
margin-top:0px;
position:relative;
transition:all 0.8s ease-in-out;
}
最近要做一个项目,需要做这个放大镜,网上也有相关的DEMO,但是感觉都不是特别好,不好修改,于是重新写了一个。可随意改变DIV大小,img大小,margin的大小等等,只需要修改CSS即可,不需要修改js文件。对于新手应该有些帮助