使用html实现图片相册展示设计

时间：2024-03-30 17:53:32

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片（相册）展示设计</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="scene">
    
  <!-- 展示层，这里我复制了4层，可以根据自己需要进行修改 -->
    <div class="img-cont left cont-1" data-helper="0" data-blocks="1"></div>
    <div class="img-cont right cont-1" data-helper="0" data-blocks="1"></div>
    <div class="content cont-1">
      <h2 class="title">Lomond lake</h2>
      <p class="content-text">Lomond lake is the largest lake in Scotland. It is located in the south of the Scottish Highlands, 27 kilometers from Glasgow. Surrounded by mountains, the south is slightly triangular.</p>
      <span class="close">+</span>
    </div>

    <div class="img-cont left cont-2" data-helper="-1" data-blocks="2"></div>
    <div class="img-cont right cont-2" data-helper="1" data-blocks="2"></div>
    <div class="content cont-2">
      <h2 class="title">Ardlui outdoor centre</h2>
      <p class="content-text">Abandoned Ardlui outdoor centre. Location: Loch Lomond, Scotland. </p>
      <span class="close">+</span>
    </div>

    <div class="img-cont left cont-3" data-helper="-2" data-blocks="3"></div>
    <div class="img-cont right cont-3" data-helper="2" data-blocks="3"></div>
    <div class="content cont-3">
      <h2 class="title">Scottish mountain lake</h2>
      <p class="content-text">Drone shot of Scottish mountain lake high up in the hills overlooking Loch Lomond and the Trossachs National Park which lurks in the distant morning haze. Location: Loch Humphrey, Scotland, U.K.</p>
      <span class="close">+</span>
    </div>

    <div class="img-cont left cont-4" data-helper="-3" data-blocks="4"></div>
    <div class="img-cont right cont-4" data-helper="3" data-blocks="4"></div>
    <div class="content cont-4">
      <h2 class="title">Mountain Valley</h2>
      <p class="content-text">Mountain Valley, Scotland.</p>
      <span class="close">+</span>
    </div>

    <h1 class="heading">BEAUTIFUL</h1>
    <p class="scroll-down">scroll down</p>
    <p class="click-blocks">click me~</p>
    <div class="pagination">
      <ul class="page-names">
        <li class="active" data-page="1">Page 1</li>
        <li data-page="2">Page 2</li>
        <li data-page="3">Page 3</li>
        <li data-page="4">Page 4</li>
      </ul>
      <ul class="page-dots">
        <li class="active" data-page="1">•</li>
        <li data-page="2">•</li>
        <li data-page="3">•</li>
        <li data-page="4">•</li>
      </ul>
    </div>
  </div>
  <!-- partial -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script><script  src="./script.js"></script>
  
  </body>
  </html>

$(document).ready(function() {
  
  var scrolling = false,
      curPage = 1,
      pages = $(".img-cont").length / 2,
      $left = $(".img-cont.left"),
      $right = $(".img-cont.right");
  
  function doMargins(paramPage) {
    
    scrolling = true;
    
    var _page = paramPage || curPage;
    
    $left.each(function() {
      var marginMult = parseInt($(this).attr("data-helper"), 10) + _page - 1;
      $(this).attr("style", "margin-top: "+ marginMult * 100 +"vh");
    });
    
    $right.each(function() {
      var marginMult = parseInt($(this).attr("data-helper"), 10) - _page + 1;
      $(this).attr("style", "margin-top: "+ marginMult * 100 +"vh");
    });
    
    setTimeout(function() {
      scrolling = false;
    }, 1000);
  }
  
  function navigateUp() {
    if (curPage > 1) {
      curPage--;
      pagination(curPage);
      doMargins();
    }
  }
  
  function navigateDown() {
    if (curPage < pages) {
      curPage++;
      pagination(curPage);
      doMargins();
    }
  }
  
  function pagination(page) {
    $(".page-dots li").removeClass("active");
    $(".page-dots li[data-page="+ page +"]").addClass("active");
    $(".page-names li").removeClass("active");
    $(".page-names li[data-page="+page+"]").addClass("active");
    curPage = page;
  }
  
  $(document).on("click", ".page-dots li", function() {
    if (!scrolling) {
      var page = parseInt($(this).attr("data-page"), 10);
      pagination(page);
      doMargins(page);
    }
  });
  
  function openContent() {
    var number = $(this).attr("data-blocks");
    $(".scene").addClass("active");
    setTimeout(function() {
      $(".img-cont.cont-"+number).addClass("active");
      
      $(document).off("click", ".img-cont", openContent);
      $(document).unbind("keydown mousewheel DOMMouseScroll");
      
      setTimeout(function() {
        $(".content.cont-"+number).show();
        $(".content.cont-"+number).css("top");
        $(".content.cont-"+number).addClass("visible");
      }, 300);
    }, 300);
  }
  
  function initHandlers() {
    
    $(document).on("mousewheel DOMMouseScroll", function(e) {
      if (!scrolling) {
        if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
          navigateUp();
        } else { 
          navigateDown();
        }
      }
    });

    $(document).on("keydown", function(e) {
      if (!scrolling) {
        if (e.which === 38) {
          navigateUp();
        } else if (e.which === 40) { 
          navigateDown();
        }
      }
    });
    
    $(document).on("click", ".img-cont:not(.active)", openContent);
    
  }
  
  initHandlers();
  
  $(document).on("click", ".close", function() {
    scrolling = true;
    var $content = $(this).parent();
    $content.removeClass("visible");
    setTimeout(function() {
      
      $content.hide();
      $content.css('top');
      $(".img-cont").removeClass("active").addClass("closing");
      
      setTimeout(function() {
        $(".scene").removeClass("active");
        initHandlers();
        
        setTimeout(function() {
          $(".img-cont").removeClass("closing");
          scrolling = false;
        }, 300);
        
      }, 300);
      
    }, 800);
  });
  
});

$(document).ready(function() {
  
  var scrolling = false,
      curPage = 1,
      pages = $(".img-cont").length / 2,
      $left = $(".img-cont.left"),
      $right = $(".img-cont.right");
  
  function doMargins(paramPage) {
    
    scrolling = true;
    
    var _page = paramPage || curPage;
    
    $left.each(function() {
      var marginMult = parseInt($(this).attr("data-helper"), 10) + _page - 1;
      $(this).attr("style", "margin-top: "+ marginMult * 100 +"vh");
    });
    
    $right.each(function() {
      var marginMult = parseInt($(this).attr("data-helper"), 10) - _page + 1;
      $(this).attr("style", "margin-top: "+ marginMult * 100 +"vh");
    });
    
    setTimeout(function() {
      scrolling = false;
    }, 1000);
  }
  
  function navigateUp() {
    if (curPage > 1) {
      curPage--;
      pagination(curPage);
      doMargins();
    }
  }
  
  function navigateDown() {
    if (curPage < pages) {
      curPage++;
      pagination(curPage);
      doMargins();
    }
  }
  
  function pagination(page) {
    $(".page-dots li").removeClass("active");
    $(".page-dots li[data-page="+ page +"]").addClass("active");
    $(".page-names li").removeClass("active");
    $(".page-names li[data-page="+page+"]").addClass("active");
    curPage = page;
  }
  
  $(document).on("click", ".page-dots li", function() {
    if (!scrolling) {

相关文章