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文件。对于新手应该有些帮助