闲话先不说,直接看实例先:
[演示地址: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>
是不是蛮有趣的?代码非常简单,而且效果不错。
其实这个效果用来作图片展示也是不错的,至于到底该用在哪,该怎样用,这都在于大家,所需的只是要会举一反三而已。