目录:
- 简单的图像翻滚
- 漂亮的相册集
- 资源文件
简单的图像翻滚
image-rollover常被用在交互式导航栏上,当我们的鼠标移动到导航栏时,按钮的外观改变。例如我们以如下几幅黑白缩略图作为导航图表,当鼠标移动到指定图标时,图标变为明亮的彩色图片。预览如下:
该页面的代码十分简单,我们以此为例逐步实现图像的翻滚:
img-rollover.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rollover Images</title>
<style>
html , body{
line-height: 1;
background-color: #334873;
}
h1 {
font-family: 'ColaborateRegular', Arial, sans-serif;
}
p {
font-family: 'ColaborateRegular', Arial, sans-serif;
color: white;
}
.logo {
letter-spacing: -1px;
color: rgb(195,151,51);
text-shadow: 2px 2px 1px rgba(0,0,0,.25);
font: normal 54px 'ColaborateThinRegular', Arial, sans-serif;
}
#gallery img {
display: inline-block;
margin: 10px;
border: 1px solid rgb(0,0,0);
}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(ducument).ready(
);//end ready
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">Easy Sir</p>
</div>
<div class="content">
<div class=