<!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 { 100%; height: 640px; margin: 0 auto; padding-top: 60px; background-color: #333; } #container { 800px; height: 500px; margin: 0 auto; background: url("http://img.h5course.cn/codepen/2017.01.19.02.png") no-repeat; } /*右侧的小图区域*/ #container .thumbnails { float: left; 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; 64px; height: 64px; padding: 0px 10px 0px 0; } /*缩略图图片大小*/ img.large-thumb-image { display: block; position: absolute; left: 5px; top: 4px; 54px; height: 54px; } /*右侧缩略图的边框与阴影处理 start*/ .large-thumb-border { position: absolute; 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; 55px; height: 55px; background: url("http://img.h5course.cn/codepen/2017.01.19.04.png") -150px 0 no-repeat; } .thumb-container { 65px; height: 65px; background: url("http://img.h5course.cn/codepen/2017.01.19.05.png") no-repeat; } /*end*/ /*左侧的大图区域*/ #largephoto { float: left; 440px; height: 370px; margin: 60px 0 0 40px; background-color: #333; border-radius: 10px; background-size: 100% 100%; } /*左侧大图的阴影背景*/ #largetrans { 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; 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>