index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photo Library</title>
<link rel="stylesheet" href="10.css" type="text/css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="10-ie.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="container">
<h1>Photo Gallery</h1>
<div id="gallery">
<div class="photo">
<img src="photos/skyemonroe.jpg">
<div class="details">
<div class="description">The Cuillin Mountains, Isle of Skye, Scotland.</div>
<div class="date">12/24/2000</div>
<div class="photographer">Alasdair Dougall</div>
</div>
</div>
<div class="photo">
<img src="photos/dscn1328.jpg">
<div class="details">
<div class="description">Mt. Ruapehu in summer</div>
<div class="date">01/13/2005</div>
<div class="photographer">Andrew McMillan</div>
</div>
</div>
<div class="photo">
<img src="photos/024.JPG">
<div class="details">
<div class="description">midday sun</div>
<div class="date">04/26/2011</div>
<div class="photographer">Jaycee Barratt</div>
</div>
</div>
<div class="photo">
<img src="photos/dsc20040321_191051_23.jpg">
<div class="details">
<div class="description">Dark sunset sky tones</div>
<div class="date">03/21/2004</div>
<div class="photographer">Leon Brooks</div>
</div>
</div>
<div class="photo">
<img src="photos/portland_178.jpg">
<div class="details">
<div class="description">Mt. Shasta, Weed, CA</div>
<div class="date">06/16/2004</div>
<div class="photographer">Brian Lopez</div>
</div>
</div>
<div class="photo">
<img src="photos/michelle_229.jpg">
<div class="details">
<div class="description">Mountain with tree cover on foothills</div>
<div class="date">09/28/2004</div>
<div class="photographer">Brian Lopez</div>
</div>
</div>
<div class="photo">
<img src="photos/100_0207.JPG">
<div class="details">
<div class="description">Poas Volcano, Caldera and Poor Man's Umbrella</div>
<div class="date">01/02/2004</div>
<div class="photographer">Nat Edwards</div>
</div>
</div>
<div class="photo">
<img src="photos/DSC01281.JPG">
<div class="details">
<div class="description">Mt Compas, South Australia</div>
<div class="date">01/01/2007</div>
<div class="photographer">Rod Conlon</div>
</div>
</div>
<div class="photo">
<img src="photos/m4.jpg">
<div class="details">
<div class="description">Waterfall on the outskirts of Highlands N.C.</div>
<div class="date">11/21/2008</div>
<div class="photographer">Neal Floyd</div>
</div>
</div>
</div>
<a id="more-photos" href="1.html">More Photos</a>
</div>
<script src="jquery.js"></script>
<script src="10.js"></script>
</body>
</html>
1.html
<div class="photo">
<img src="photos/dsc_21070a.jpg">
<div class="details">
<div class="description">Gum Tree at Sunset, Auckland, New Zealand</div>
<div class="date">04/12/2009</div>
<div class="photographer">Andrew McMillan</div>
</div>
</div>
<div class="photo">
<img src="photos/01070131.JPG">
<div class="details">
<div class="description">Noleridge Park Cedar Rapids Iowa Cloudscape</div>
<div class="date">01/07/2000</div>
<div class="photographer">Allan Zieser</div>
</div>
</div>
<div class="photo">
<img src="photos/P3120502.JPG">
<div class="details">
<div class="description">Mountains in Jasper</div>
<div class="date">03/12/2006</div>
<div class="photographer">Teri Metcalf</div>
</div>
</div>
<div class="photo">
<img src="photos/azsnow.jpg">
<div class="details">
<div class="description">San Fransisco Mountains looking across Flagstaff</div>
<div class="date">12/14/2004</div>
<div class="photographer">Tyler Finvold</div>
</div>
</div>
<div class="photo">
<img src="photos/795040-R1-026-11A_011.jpg">
<div class="details">
<div class="description">God's Peace</div>
<div class="date">11/15/2010</div>
<div class="photographer">Dan Hart</div>
</div>
</div>
<div class="photo">
<img src="photos/0000001.jpg">
<div class="details">
<div class="description">going home</div>
<div class="date">11/23/2010</div>
<div class="photographer">Guest</div>
</div>
</div>
<div class="photo">
<img src="photos/010.JPG">
<div class="details">
<div class="description">Clouds in southern England</div>
<div class="date">04/23/2011</div>
<div class="photographer">Jaycee Barratt</div>
</div>
</div>
<div class="photo">
<img src="photos/dsc20050117_060629_5.jpg">
<div class="details">
<div class="description">Whispy clouds</div>
<div class="date">01/17/2005</div>
<div class="photographer">Leon Brooks</div>
</div>
</div>
<div class="photo">
<img src="photos/dsc20041029_180840_10.jpg">
<div class="details">
<div class="description">Sun exploding through clouds, Wahroona, Western Australia</div>
<div class="date">10/29/2004</div>
<div class="photographer">Leon Brooks</div>
</div>
</div>
10.js
$(document).ready(function() {
var pageNum = 1;
$('#more-photos').click(function(event) {
event.preventDefault();
var $link = $(this);
var url = $link.attr('href');
if (url) {
$.get(url, function(data) {
$('#gallery').append(data);
});
pageNum++;
if (pageNum < 20) {
$link.attr('href:', pageNum + '.html');
}
else {
$link.remove();
}
}
});
$('div.photo').hover(function() {
$(this).find('.details').fadeTo('fast', 0.7);
}, function() {
$(this).find('.details').fadeOut('fast');
});
});
html代码中间的div部分可以忽略，要实现点击 More Photos 的时候再页面后直接追加页面1.html，但是无法追加成功，点击了没效果，希望大牛指点一下
