我们要执行的任务是页面起初有一部分图片,我们在底下有一个More Photos的链接,点击后,向当前页面后加载一部分图片,再点击该链接,继续加载,直到将我们列出的页面加载完成,此时该链接也消失了。
首先效果图如下:
这个只截取了最底下的一部分页面。在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失。
我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完。
首先body中代码如下:
<div id = "container"> <h1> Photo Gallery</h1> <div id = "gallery"> <div class = "photo"> <img src = "./images/1.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye ....</div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/2.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye.... </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/3.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye.... </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> //若干图片 </div> <div class = "link"><a id = "more-photos" href = "1.html"> More Photos >></a></div> </div>
然后在同一根目录下写几个HTML代码片段,用于加载。
如,我这有一个1.html代码如下
<div class = "photo"> <img src = "./images/1.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/2.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/3.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/4.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/5.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/6.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div>
在这个HTML片段中我引入了6个图片。其他的片段如2.html等等都可以仿照上面的这个来写。在定义好了许多个HTML片段后,利用jQuery进行动态追加数据。
<script> $(document).ready(function(){ //首先定义一个变量来记录当前是多少页 var pageNum = 1; //给链接添加点击事件 $("#more-photos").click(function(event){ event.preventDefault(); var $link = $(this); //获得当前所点链接的url var url = $link.attr('href'); //如果该链接的url存在,进行页面追加 if(url){ $.get(url, function(data){ $("#gallery").append(data); }); pageNum ++; //总共有十个片段要追加,名称分别为1.html,2.html ...10.html 当当前页面的总数小于总数时,进行链接更新。 if(pageNum < 10){ $link.attr('href', './'+pageNum+'.html'); } //当将所有片段追加完成后,移除链接。 else{ $link.remove(); } } }) });
以上的代码就可以进行动态的向页面追加数据了。
但是在谷歌的浏览器中会出现以下的错误: