鼠标经过放大的翻页样式-JS特效-爱易网页

鼠标经过放大的翻页样式

日期：2014-05-18　浏览次数：20208 次

div+css制作的鼠标经过放大翻页样式的特效,以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<!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" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>鼠标放大翻页样式 - 运动缓冲效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">  
#nav {
 list-style: none;
 display: inline;
}
#nav li {
 display: inline;
 margin-right: 5px;
 float: left;
}
#nav a {
 color: #399;
 text-decoration: none;
 display: block;
 font-size: 14px;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 border: 1px solid #999;
 width: 20px;
 height: 20px;
 line-height: 20px;
 text-align: center;
}
#nav li a:hover {
 font-size: 24px;
 line-height: 40px;
 height: 40px;
 width: 40px;
 position: absolute;
 z-index: 10;
 margin: -10px 0 0 -10px;
 font-weight: bold;
 color: #CC66FF;
 border: 1px dotted #666666;
 background: #EEE;
}
</style>
</head>
<body>
<ul id="nav">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">»</a></li>
</ul>
</body>
</html></font>
<a href="http://js.aiyiweb.com/">欢迎访问爱易网网页特效代码站，js.aiyiweb.com</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]