jQuery怎么动态追加页面数据

本篇内容介绍了“jQuery怎么动态追加页面数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联是一家以网络技术公司,为中小企业提供网站维护、成都网站建设、网站建设、网站备案、服务器租用、域名与空间、软件开发、重庆小程序开发公司等企业互联网相关业务,是一家有着丰富的互联网运营推广经验的科技公司,有着多年的网站建站经验,致力于帮助中小企业在互联网让打出自已的品牌和口碑,让企业在互联网上打开一个面向全国乃至全球的业务窗口:建站电话联系:18980820575

我们要执行的任务是页面起初有一部分图片,我们在底下有一个More Photos的链接,点击后,向当前页面后加载一部分图片,再点击该链接,继续加载,直到将我们列出的页面加载完成,此时该链接也消失了。

首先效果图如下:

jQuery怎么动态追加页面数据

这个只截取了最底下的一部分页面。在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失。
我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完。
首先body中代码如下:


 Photo Gallery

                   The Cullin Mountains, Isle of skye ....
      12/24/2000
       Alasdair Dougall
                           The Cullin Mountains, Isle of skye....        12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye....        12/24/2000        Alasdair Dougall         //若干图片   More Photos >> 

然后在同一根目录下写几个HTML代码片段,用于加载。

如,我这有一个1.html代码如下


    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
       Alasdair Dougall
    
  

  
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
       Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
       Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
       Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
       Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
       Alasdair Dougall
    
  

在这个HTML片段中我引入了6个图片。其他的片段如2.html等等都可以仿照上面的这个来写。在定义好了许多个HTML片段后,利用jQuery进行动态追加数据。

首先引入一个jquery库 http://libs.baidu.com/jquery/1.9.0/jquery.js


  
  *{
    margin: 0px;
    padding: 0px;
  }


  #container{
    position: relative;
    width: 1300px;
    margin: 0 auto;
    /*background-color: #ccc;
    height: auto;*/
  }
  #gallery{
    position: relative;
    width: 1300px;
    margin: 0 auto;

  }
  .details{
    display: none;
  }

  .photo{
    padding: 20px;
    border-radius: 5px;
    border:1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    float: left;
    margin: 8px;
  }

  .photo img{

    /*z-index: 1;*/
    width: 200px;
    height: 300px;
    clear: both;
  }

  .photo .details{
    position: absolute;
    z-index: 2;
    padding-left: 20px;
    margin-top:-200px;
    /*clear: both;*/
    overflow: hidden;
  }
  .description{
    overflow: hidden;
    width: 200px;
    color: lightgreen;
    font-size: 18px;
    font-weight: bold;
  }

  .date{
    font-size:16px;
    margin: 20px 0px;
    color: red; 
  }
  .photographer{
    font-size:14px;
    font-family: "Arial" ;
  }
  .link a{

    clear: both;
    text-decoration: none;
    padding-left: 90%;


  }
  h2{
    text-align: center; 
  }
  

  



 Photo Gallery

                   The Cullin Mountains, Isle of skye ....       12/24/2000        Alasdair Dougall                            The Cullin Mountains, Isle of skye....        12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye....        12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye .....       12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye ....       12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye ...       12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye....        12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye.....        12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye ......        12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye        12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye        12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye        12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye        12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye        12/24/2000        Alasdair Dougall                              The Cullin Mountains, Isle of skye        12/24/2000        Alasdair Dougall           More Photos >> 

“jQuery怎么动态追加页面数据”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


当前文章:jQuery怎么动态追加页面数据
网页地址:http://bzwzjz.com/article/geojgi.html