栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jQuery动态追加页面数据以及事件委托详解

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jQuery动态追加页面数据以及事件委托详解

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

首先效果图如下:

这个只截取了最底下的一部分页面。在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失。
我们现在要做的就是点击底下的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;
    
  }
  #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{

    
    width: 200px;
    height: 300px;
    clear: both;
  }

  .photo .details{
    position: absolute;
    z-index: 2;
    padding-left: 20px;
    margin-top:-200px;
    
    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%;


  }
  h1{
    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 >> 




以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/87894.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号