纯CSS实现的可局部放大的放大镜效果

2010-01-28 17:55:58 作者:http://www.cssplay.co.uk 来源:查看 | 【

纯CSS实现的类似于PPG的商品局部放大效果,无需任何js脚本支持

查看演示页面 View Demo 查看全部代码 View Code

下载
点击这里下载脚本源代码


在网页<head>区添加以下代码

<style type="text/css"> 
 
.frame {width:180px; height:240px; background:url(statue-small.jpg); font-size:1px; margin-left:10px;}
.frame a {display:block; float:left; width:5px; height:5px; cursor:crosshair; position:relative; z-index:10;}
 
.frame a.r1,
.frame a.r26 {height:60px;}
 
.frame a.c1,
.frame a.c14 {width:60px;}
 
.frame a:hover {direction:ltr; position:relative; z-index:1}
.frame a:hover b {display:block; position:absolute; width:118px; height:118px; top:-60px; left:-60px; border:1px solid #000; background:#fff;
filter: alpha(opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
opacity:0.3;
}
.frame a.r1:hover b {top:0;}
.frame a.c1:hover b {left:0;}
 
.frame a:hover i em {display:block; width:540px; height:720px; background:url(statue.jpg); position:absolute;}
 
.frame a:hover i {display:block; width:360px; height:360px; position:absolute; overflow:hidden; top:0;}
.frame a.c1:hover i {left:200px;}
.frame a.c2:hover i {left:140px;}
.frame a.c3:hover i {left:135px;}
.frame a.c4:hover i {left:130px;}
.frame a.c5:hover i {left:125px;}
.frame a.c6:hover i {left:120px;}
.frame a.c7:hover i {left:115px;}
.frame a.c8:hover i {left:110px;}
.frame a.c9:hover i {left:105px;}
.frame a.c10:hover i {left:100px;}
.frame a.c11:hover i {left:95px;}
.frame a.c12:hover i {left:90px;}
.frame a.c13:hover i {left:85px;}
.frame a.c14:hover i {left:80px;}
 
.frame a.r1:hover i {top:0;}
.frame a.r2:hover i {top:-60px;}
.frame a.r3:hover i {top:-65px;}
.frame a.r4:hover i {top:-70px;}
.frame a.r5:hover i {top:-75px;}
.frame a.r6:hover i {top:-80px;}
.frame a.r7:hover i {top:-85px;}
.frame a.r8:hover i {top:-90px;}
.frame a.r9:hover i {top:-95px;}
.frame a.r10:hover i {top:-100px;}
.frame a.r11:hover i {top:-105px;}
.frame a.r12:hover i {top:-110px;}
.frame a.r13:hover i {top:-115px;}
.frame a.r14:hover i {top:-120px;}
.frame a.r15:hover i {top:-125px;}
.frame a.r16:hover i {top:-130px;}
.frame a.r17:hover i {top:-135px;}
.frame a.r18:hover i {top:-140px;}
.frame a.r19:hover i {top:-145px;}
.frame a.r20:hover i {top:-150px;}
.frame a.r21:hover i {top:-155px;}
.frame a.r22:hover i {top:-160px;}
.frame a.r23:hover i {top:-165px;}
.frame a.r24:hover i {top:-170px;}
.frame a.r25:hover i {top:-175px;}
.frame a.r26:hover i {top:-180px;}
 
 
.frame a.c1:hover em {left:0px;}
.frame a.c2:hover em {left:0px;}
.frame a.c3:hover em {left:-15px;}
.frame a.c4:hover em {left:-30px;}
.frame a.c5:hover em {left:-45px;}
.frame a.c6:hover em {left:-60px;}
.frame a.c7:hover em {left:-75px;}
.frame a.c8:hover em {left:-90px;}
.frame a.c9:hover em {left:-105px;}
.frame a.c10:hover em {left:-120px;}
.frame a.c11:hover em {left:-135px;}
.frame a.c12:hover em {left:-150px;}
.frame a.c13:hover em {left:-165px;}
.frame a.c14:hover em {left:-190px;}
 
.frame a.r1:hover em {top:0;}
.frame a.r2:hover em {top:0;}
.frame a.r3:hover em {top:-15px;}
.frame a.r4:hover em {top:-30px;}
.frame a.r5:hover em {top:-45px;}
.frame a.r6:hover em {top:-60px;}
.frame a.r7:hover em {top:-75px;}
.frame a.r8:hover em {top:-90px;}
.frame a.r9:hover em {top:-105px;}
.frame a.r10:hover em {top:-120px;}
.frame a.r11:hover em {top:-135px;}
.frame a.r12:hover em {top:-150px;}
.frame a.r13:hover em {top:-165px;}
.frame a.r14:hover em {top:-190px;}
.frame a.r15:hover em {top:-205px;}
.frame a.r16:hover em {top:-220px;}
.frame a.r17:hover em {top:-235px;}
.frame a.r18:hover em {top:-250px;}
.frame a.r19:hover em {top:-265px;}
.frame a.r20:hover em {top:-290px;}
.frame a.r21:hover em {top:-305px;}
.frame a.r22:hover em {top:-320px;}
.frame a.r23:hover em {top:-335px;}
.frame a.r24:hover em {top:-350px;}
.frame a.r25:hover em {top:-365px;}
.frame a.r26:hover em {top:-380px;}
 
</style> 


在网页<body>区添加以下代码

<div class="frame"> 
<a class="r1 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r1 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r2 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r2 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r3 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r3 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r4 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r4 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r5 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r5 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r6 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r6 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r7 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r7 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r8 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r8 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r9 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r9 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r10 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r10 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r11 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r11 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r12 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r12 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r13 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r13 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r14 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r14 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r15 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r15 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r16 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r16 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r17 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r17 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r18 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r18 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r19 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r19 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r20 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r20 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r21 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r21 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r22 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r22 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r23 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r23 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r24 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r24 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r25 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r25 c14" href="#x"><b></b><i><em></em></i></a> 
 
<a class="r26 c1" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c2" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c3" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c4" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c5" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c6" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c7" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c8" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c9" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c10" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c11" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c12" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c13" href="#x"><b></b><i><em></em></i></a> 
<a class="r26 c14" href="#x"><b></b><i><em></em></i></a> 
 
</div> 

下载"纯CSS实现的可局部放大的放大镜效果"

  • 本地下载
  • 本地下载2

相关资源