* { margin:0; padding:0; } .zoom { width:450px; height:450px; border:solid 1px #bbb; margin:30px; position:relative; } .s_area { position:relative; } .s_area img { display:block; } .mask { width:100px; height:100px; background:#000; filter:alpha(opacity=65); opacity:0.65; position:absolute; left:-10000px; top:0; } .b_area { position:absolute; left:-10000px; top:-1px; border:solid 1px #bbb; width:450px; height:450px; overflow:hidden; } .b_area img { position:absolute; left:0; top:0; }
通过源生代码实现现如今绝大多数商城中商品详情页面中的放大镜功能。代码可读性强,性能较好