87,899
社区成员
发帖
与我相关
我的任务
分享
<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Slide Thumbs</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
body {
background: #EEE;
font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
font-size: 14px;
line-height: 1.6;
}
#content {
width: 750px;
margin: 50px auto;
padding: 20px;
background: #FFF;
border: 1px solid #CCC;
}
h1 {
margin: 0;
}
hr {
border: none;
height: 1px; line-height: 1px;
background: #CCC;
margin-bottom: 20px;
padding: 0;
}
p {
margin: 0;
padding: 7px 0;
}
.clear {
clear: both;
line-height: 1px;
font-size: 1px;
}
a {
outline-color: #888;
}
#preview_wrap {
margin: 0 auto;
padding: 22px;
width: 550px;
height: 400px;
background: url('bg_preview.gif') top left no-repeat;
}
#preview_outer {
overflow: hidden;
width: 550px;
height: 400px;
position: relative;
}
#preview_inner {
text-align: left;
height: 100%;
position: relative;
}
#preview_inner div {
float: left;
width: 550px;
height: 400px;
position: relative;
}
#preview_inner div a {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
text-indent: 20px;
padding: 20px 0;
color: #fff;
background: url(bg_trans.png);
text-decoration: none;
font-size: 18px;
}
#thumbs {
padding-top: 30px;
position: relative;
width: 750px;
text-align: center;
}
#thumbs span {
padding: 12px;
width: 80px;
height: 80px;
cursor: pointer;
background: url('bg_thumb.gif') top left no-repeat;
display: inline-block;
}
#arrow {
position: absolute;
top: -13px;
background: url('bg_arrow.gif') top center no-repeat;
width: 104px;
height: 39px;
display: none;
}
#preview_wrap {
margin: 0 auto;
padding: 22px;
width: 550px;
height: 400px;
background: url('bg_preview.gif') top left no-repeat;
}
#preview_outer {
overflow: hidden;
width: 550px;
height: 400px;
position: relative;
}
#preview_inner {
text-align: left;
height: 100%;
position: relative;
}
#preview_inner div {
float: left;
width: 550px;
height: 400px;
position: relative;
}
#preview_inner div a {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
text-indent: 20px;
padding: 20px 0;
color: #fff;
background: url(bg_trans.png);
text-decoration: none;
font-size: 18px;
}
#thumbs {
padding-top: 30px;
position: relative;
width: 750px;
text-align: center;
}
#thumbs span {
padding: 12px;
width: 80px;
height: 80px;
cursor: pointer;
background: url('bg_thumb.gif') top left no-repeat;
display: inline-block;
}
#arrow {
position: absolute;
top: -13px;
background: url('bg_arrow.gif') top center no-repeat;
width: 104px;
height: 39px;
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// Save the jQuery objects for later use.
var outer = $("#preview_outer");
var arrow = $("#arrow");
var thumbs = $("#thumbs span");
var preview_pos;
var preview_els = $("#preview_inner div");
var image_width = preview_els.eq(0).width(); // Get width of imaages
// Hook up the click event
thumbs.mouseover(function() {
// Get position of current image
preview_pos = preview_els.eq( thumbs.index( this) ).position();
// Animate them!
outer.stop().animate( {'scrollLeft' : preview_pos.left}, 500 );
arrow.stop().animate( {'left' : $(this).position().left }, 500 );
});
// Reset positions on load
arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
outer.animate( {'scrollLeft' : 0}, 0 );
// Set initial width
$("#preview_inner").css('width', preview_els.length * image_width);
});
</script>
</head>
<body>
<div id="content">
<div id="preview_wrap">
<div id="preview_outer">
<div id="preview_inner">
<div>
<img src="1_b.jpg" alt="Leonardo Maia" />
<a href="http://www.leonardomaia.com.br/">Leonardo Maia</a>
</div>
<div>
<img src="2_b.jpg" alt="skillicorn" />
<a href="http://skillicorn.org/">skillicorn</a>
</div>
<div>
<img src="3_b.jpg" alt="theenergycell" />
<a href="http://www.energycell.co.uk/">theenergycell</a>
</div>
<div>
<img src="4_b.jpg" alt="Fred Maya" />
<a href="http://fredmaya.com/">Fred Maya</a>
</div>
<div>
<img src="4_b.jpg" alt="Fred Maya" />
<a href="http://fredmaya.com/">Fred Maya</a>
</div>
</div>
</div>
</div>
<div id="thumbs">
<div id="arrow"></div>
<span><img src="1_s.gif" alt="Leonardo Maia" /></span>
<span><img src="2_s.gif" alt="skillicorn" /></span>
<span><img src="3_s.gif" alt="theenergycell" /></span>
<span><img src="4_s.gif" alt="Fred Maya" /></span>
<span><img src="3_s.gif" alt="theenergycell" /></span>
</div>
</div>
</body>
</html>