利用CSS样式表的内外补丁的调整功能,可以实现文字、图片等的放大镜效果:
示例代码1:
<!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放大镜效果</title> <style type="text/css"> <!-- a { float:left; margin:5px 1px 0 1px; width:20px; height:20px; color:#999; font:12px/20px Arial; text-align:center; text-decoration:none; border:1px solid orange; } a:hover { position:relative; margin:0 -9px 0 -9px; padding:0 5px; width:30px; height:30px; font:bold 16px/30px Arial; color:#000; border:1px solid black; background:#eee; } --> </style> </head>
 
<body> <div> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div> </body> </html>
示例代码2:
<!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> <title>CSS图片放大镜效果</title> <style type="text/css"> body {  margin:0;  padding:0; } ul#bigs {  LIST-STYLE-TYPE: none;  DISPLAY:inline;  margin: 0px;  clear: both; } ul#bigs li {  FLOAT: left;  display: inline;  width:88px;  height:33px;  margin-top: 9px;  margin-left: 8px; } ul#bigs li a {  display: block;  width:88px;  height:33px; } ul#bigs li a img {  border:1px #666 solid;  width:100%;  height:100%; } ul#bigs li a:hover {  position: absolute;  z-index:100;  margin: -8px; } ul#bigs li a:hover img {  width:176px;  height:66px;  border:1px #ccc solid; } </style> </head> <body> <div>   <ul id="bigs">     <li><a href="1#" title="css8"><img src="http://www.ibloglife.com/logo.gif" width="88" alt="活着的博客logo" /></a></li>     <li><a href="2#" title="css8"><img src="http://www.ibloglife.com/logo.gif" width="88" alt="活着的博客logo" /></a></li>     <li><a href="3#" title="css8"><img src="http://www.ibloglife.com/logo.gif" width="88" alt="活着的博客logo" /></a></li>   </ul> </div> </body> </html>


© 活着的博客 - 李权辉的个人博客:人,终究是生活在现实之中,是为了活着而生活.