<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>
<style>
body {
width: 100%;
height: 640px;
margin: 0 auto;
padding-top: 60px;
background-color: #333;
}
#container {
width: 800px;
height: 500px;
margin: 0 auto;
background: url("http://img.h5course.cn/codepen/2017.01.19.02.png") no-repeat;
}
/*右侧的小图区域*/
#container .thumbnails {
float: left;
width: 240px;
margin: 70px 0 0 25px;
}
.thumbnails h2 {
margin: 15px 0;
font-size: 22px;
text-align: center;
}
.thumbnailimage {
float: left;
padding: 7px;
}
.large-thumb {
float: left;
position: relative;
width: 64px;
height: 64px;
padding: 0px 10px 0px 0;
}
/*缩略图图片大小*/
img.large-thumb-image {
display: block;
position: absolute;
left: 5px;
top: 4px;
width: 54px;
height: 54px;
}
/*右侧缩略图的边框与阴影处理 start*/
.large-thumb-border {
position: absolute;
width: 65px;
height: 65px;
background: url("http://img.h5course.cn/codepen/2017.01.19.03.png") no-repeat;
}
.large-thumb-shine {
position: absolute;
left: 5px;
top: 5px;
width: 55px;
height: 55px;
background: url("http://img.h5course.cn/codepen/2017.01.19.04.png") -150px 0 no-repeat;
}
.thumb-container {
width: 65px;
height: 65px;
background: url("http://img.h5course.cn/codepen/2017.01.19.05.png") no-repeat;
}
/*end*/
/*左侧的大图区域*/
#largephoto {
float: left;
width: 440px;
height: 370px;
margin: 60px 0 0 40px;
background-color: #333;
border-radius: 10px;
background-size: 100% 100%;
}
/*左侧大图的阴影背景*/
#largetrans {
width: 440px;
height: 370px;
background-image: url("http://img.h5course.cn/codepen/2017.01.19.06.png");
background-size: 100% 100%;
border-radius: 10px;
}
/*大图的样式大小设置*/
.large-image {
display: none;
float: left;
width: 440px;
height: 370px;
}
</style>
<body>
<div id="container">
<!-- 左侧大图展示区域 -->
<div id="largephoto">
<div id="largetrans"></div>
</div>
<!-- 右侧缩略图区域 -->
<div class="thumbnails">
<h2>缩略图相册展示</h2>
<!-- 缩略图1展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (26).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (26).jpg" class="large-image">
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图2展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (73).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (73).jpg" class="large-image"/>
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图3展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (102).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (102).jpg" class="large-image"/>
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图4展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (44).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (44).jpg" class="large-image"/>
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图5展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (57).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (57).jpg" class="large-image">
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图6展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (61).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (61).jpg" class="large-image"/>
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图7展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (81).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (81).jpg" class="large-image"/>
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图8展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (100).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (100).jpg" class="large-image" />
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图9展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (118).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂（码匠）-素材图 (118).jpg" class="large-image" />
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
/*相册使用的欢迎图片*/
var default_image = "http://img.h5course.cn/codepen/2017.01.19.01.jpg";
/*加载默认图像*/
loadPhoto(default_image);
function loadPhoto(url) {
/*图像预加载*/
var img = new Image();
$(img).attr({ "src": url });
$("#largephoto").css({
"background-image": 'url("' + url + '")'
});
}
/* 单击缩略图时*/
$(".thumb-container").click(function() {
var handler = $(this).find(".large-image");
var newsrc = handler.attr("src");
loadPhoto(newsrc);
});
/* 当鼠标悬停在缩略图上时*/
$(".thumb-container").hover(function() {
$(this).find(".large-thumb").stop().animate({
"marginLeft": "-7px",
"marginTop": "-7px"
}, 200);
$(this).find(".large-thumb-shine").stop();
$(this).find(".large-thumb-shine").css({
"background-position-x": "-100px"
});
$(this).find(".large-thumb-shine").animate({
"background-position-x": "100px"
}, 700);
}, function() {
$(this).find(".large-thumb").stop().animate({
"marginLeft": "0px",
"marginTop": "0px"
},200);
});
});
</script>
</html>
