有趣的放大镜效果-CSDN博客

本文链接：https://blog.csdn.net/storm0/article/details/1821337

　　闲话先不说，直接看实例先：

　　［演示地址：http://www.doyoe.com/model/xhtmlcss/style/larger/larger.htm］

CSS部分：

.larger {
width:300px;
padding:40px;
overflow:auto;
}
.larger a {
float:left;
width:20px;
height:20px;
color:#ccc;
background:#fff;
font:bold 12px/20px "宋体";
text-decoration:none;
text-align:center;
background-color:#fff;
border:1px solid #ccc;
margin:10px 1px;
}
.larger a img {
width:20px;
height:20px;
border:none;
}
.larger a:hover {
position:relative;
width:40px;
height:40px;
color:#333;
background:#eee;
font:bold 32px/40px "黑体";
border:1px solid #555;
margin:-2px -10px;
padding:1px;
}
.larger a:hover img {
width:40px;
height:40px;
}

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe, 飘零雾雨, edzmaster@gmail.com" />
<title>放大镜效果</title>
</head>
<body>
<h3>简单的放大镜效果：</h3>
<div class="larger">
<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"><img src="4.jpg" alt="放大的美女" title="放大的美女" /></a>
</div>
</body>
</html>