查看完整源代码

纯CSS实现的可局部放大的放大镜效果
兼容性：IE6+ FireFox2+ Opera9+ 更新时间：2010-1-28 查看代码说明>>>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS实现的可局部放大的放大镜效果 - 分享JavaScript-sharejs.com</title>
<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" />
<meta name="description" content="纯CSS实现的可局部放大的放大镜效果,JavaScript分享网" />
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />
<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> 
</head>
<body>

获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
 
转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！
</div>
</body>
</html>

提示：点击“运行代码”可预览效果，可以修改部分代码后再运行！