jquery 仿qq相册

楚文滨 3个月前 39浏览 0评论

jQuery是一个非常流行的JavaScript库,它简化了网页开发中的许多任务。其中一个使用jQuery的方式是创建动态的图库。今天,我们将使用jQuery来创建一个仿QQ相册的实例。

$(document).ready(function() {
  // 预设展示第一个相册
  $("#album1").show();
  
  // 点击相册名称时,展示该相册
  $(".album-name").click(function() {
    var albumToShow = $(this).attr("id");
    $(".album").hide();
    $("#" + albumToShow + "-content").show();
  });
  
  // 点击图片时,展示大图
  $(".photo").click(function() {
    var photoSrc = $(this).attr("src");
    $("#large-photo").attr("src", photoSrc);
    $("#lightbox").fadeIn();
  });
  
  // 点击大图时,隐藏它
  $("#lightbox").click(function() {
    $(this).fadeOut();
  });
});

首先,我们使用jQuery的.hide()函数将第一个相册以外的内容隐藏。接下来,我们为每个相册名称添加了一个点击事件,当该名称被点击时,我们使用jQuery的.show()函数展示对应的相册。类似地,当图片被点击时,我们展示它的大图,并在大图上添加了一个点击事件,当它被点击时,将隐藏大图。最后,我们将所有这些事件绑定到了文档准备就绪时执行的函数中,以确保所有元素都能正确与jQuery交互。