在很多的电商网站上的item页一般都会有放大镜的功能。今天就带大家一起实现个简单版的放大镜。
首页我们来来看下页面布局：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 放大镜 </title> <style type="text/css"> #div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; } #div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; } #div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; } #div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;} #div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } #div1 .big_pic img { position:absolute; top: -30px; left: -80px; } </style> </head> <body> <div id="div1"> <div class="small_pic"> <span class="mark"></span> <span class="float_layer"></span> <img width="200" height="200" src="http://img2.hqbcdn.com/activity/93/bc/93bca80c2e76b207e451ae5d40af351b.jpg" alt="放大镜图片" longdesc="http://www.okhqb.com" /> </div> <div class="big_pic"> <img width="450" height="450" src="http://resource.okhqb.com/thumbs/product/b6/66/b6667789322a6805a7b8e94b523a86e1.340.jpg" alt="放大镜图片二" longdesc="http://www.okhqb.com" /> </div> </div> </body> </html>