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

在这里插入图片描述

<!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) {
      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);
  });
  
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/500183.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

SQL--报错注入(join无列名注入)

SQL--报错注入(join无列名注入)

SQL报错注入 平时在做SQL题时&#xff0c;如果发生语法的错误时&#xff0c;就会产生报错&#xff0c;报错的信息就会显示在前端 报错注入大多是利用函数会报错的特性&#xff0c;将需要的信息通过报错信息回显出来 报错注入函数&#xff08;后面主要的还有一个floor函数暂时…
阅读更多...
虚拟机 centos 安装后与主机 ip保持一致

虚拟机 centos 安装后与主机 ip保持一致

1、安装时 网络模式 悬着自动检测 &#xff08;桥接&#xff09; 2、打开网络 这里如果没有打开 就去 编辑 该文件。把ONBOOTno 改为yes 后 vim /etc/sysconfig/network-scripts/ifcfg-ens160 刷新配置 systemctl restart network 再查看addr 与本机 192.168.31.xx 在同…
阅读更多...
Python Flask Web框架初步入门

Python Flask Web框架初步入门

前言 flask基础 搭建flask服务器 定义html 使用templates模板定义页面的html html页面编写 render_template传参变量 定义图片 创建static目录&#xff0c;存入图片 html编写 flask入门 网站多域名 网站之间超链接跳转 入门案例 将centos的rpm包下载链接集成到自…
阅读更多...
13-API风格（下）：RPCAPI介绍

13-API风格（下）：RPCAPI介绍

RPC在Go项目开发中用得也非常多&#xff0c;需要我们认真掌握。 RPC介绍 根据维基百科的定义&#xff0c;RPC&#xff08;Remote Procedure Call&#xff09;&#xff0c;即远程过程调用&#xff0c;是一个计算机通信协议。该协议允许运行于一台计算机的程序调用另一台计算机…
阅读更多...
发光二极管限流电阻对电路性能有哪些影响？

发光二极管限流电阻对电路性能有哪些影响？

目录 1.控制电流 2.稳定电压&#xff08;亮度控制&#xff09; 3.功耗控制&#xff08;保护元件&#xff09; 4.节能控制 发光二极管&#xff08;LED&#xff09;限流电阻在电路中对电路性能主要有以下几个影响&#xff1a; 1.控制电流 限流电阻通过限制电流&#xff0c;使LED工…
阅读更多...
WebGIS开发

WebGIS开发

1.准备工作 高德开发API注册账号&#xff0c;创建项目拿到key和密钥 高德key 2.通过JS API引入高德API <html><head><meta charset"utf-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><metaname&quo…
阅读更多...
pdf在浏览器上无法正常加载的问题

pdf在浏览器上无法正常加载的问题

一、背景 觉得很有意思给大家分享一下。事情是这样的&#xff0c;开发给我反馈说&#xff0c;线上环境接口请求展示pdf异常&#xff0c;此时碰巧我前不久正好在ingress前加了一层nginx&#xff0c;恰逢此时内心五谷杂陈&#xff0c;思路第一时间便放在了改动项。捣鼓了好久无果…
阅读更多...
上位机图像处理和嵌入式模块部署（qmacvisual非opencv算法编写）

上位机图像处理和嵌入式模块部署（qmacvisual非opencv算法编写）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们都知道&#xff0c;qmacvisual本身依赖于qtopencv的实现。大部分的界面都是依赖于qt的实现。图像算法部分&#xff0c;也是大部分都依赖于open…
阅读更多...
【最新版RabbitMQ3.13】Linux安装基于源码构建的RabbitMQ教程

【最新版RabbitMQ3.13】Linux安装基于源码构建的RabbitMQ教程

前言 linux环境 安装方式有三种&#xff0c;我们这里使用源码安装 Linux下rpm、yum和源码三种安装方式简介 个人语雀首发教程&#xff1a;https://www.yuque.com/wzzz/java/kl2zn22b42svsc6b csdn地址: https://blog.csdn.net/u013625306/article/details/137151862 安装版本…
阅读更多...
机器学习模型之逻辑回归

机器学习模型之逻辑回归

逻辑回归是一种常用的分类算法&#xff0c;尤其适用于二分类问题。逻辑回归的核心思想是通过对数几率函数&#xff08;logistic function&#xff09;将线性回归的输出映射到概率空间&#xff0c;从而实现分类。 逻辑回归的原理&#xff1a; 逻辑回归模型使用对数几率函数&am…
阅读更多...
wireshark创建显示过滤器实验简述

wireshark创建显示过滤器实验简述

伯克利包过滤是一种在计算机网络中进行数据包过滤的技术&#xff0c;通过在内核中插入过滤器程序来实现对网络流量的控制和分析。 在数据包细节面板中创建显示过滤器&#xff0c;显示过滤器可以在wireshark捕获数据之后使用。 实验拓扑图&#xff1a; 实验基础配置&#xff1…
阅读更多...
Unity-通过AB包使用SpriteAtlas图集（基于unity2018）

Unity-通过AB包使用SpriteAtlas图集（基于unity2018）

项目遇到了一个性能问题&#xff0c;需要优化UI。其中就涉及UI的合批问题&#xff0c;其中自然而然就会关联到图集的概念。旧版图集&#xff0c;Legacy Atlas&#xff0c;还没有太研究。今天主要看一下SpriteAtlas怎么使用的。 因为我们项目资源工程和Runtime是分离的&#xf…
阅读更多...
旅游管理系统|基于springBoot旅游管理系统设计与实现（附项目源码+论文）

旅游管理系统|基于springBoot旅游管理系统设计与实现（附项目源码+论文）

基于springBoot旅游管理系统设计与实现 一、摘要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本旅游管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助…
阅读更多...
国产暴雨AI服务器X3418开启多元自主可控新篇章

国产暴雨AI服务器X3418开启多元自主可控新篇章

在当前数字化转型的大潮中&#xff0c;算力作为新质生产力的重要动力引擎&#xff0c;对推动经济社会发展起着关键作用。尤其在人工智能领域&#xff0c;随着高性能、安全可控的AI算力需求持续攀升&#xff0c;国产化服务器的研发与应用显得尤为迫切。 作为国内专业的算力基础…
阅读更多...
Netty核心原理剖析与RPC实践6-10

Netty核心原理剖析与RPC实践6-10

Netty核心原理剖析与RPC实践6-10 06-粘包拆包问题&#xff1a;如何获取一个完整的网络包 本节课开始我们将学习 Netty 通信过程中的编解码技术。编解码技术这是实现网络通信的基础&#xff0c;让我们可以定义任何满足业务需求的应用层协议。在网络编程中&#xff0c;我们经常…
阅读更多...
Java八股文（高并发，分布式，JUC）

Java八股文（高并发，分布式，JUC）

Java八股文の高并发&#xff0c;分布式&#xff0c;JUC 高并发&#xff0c;分布式&#xff0c;JUC 高并发&#xff0c;分布式&#xff0c;JUC 对于高并发的系统&#xff0c;为了提高用户的体验&#xff0c;你是如何做的&#xff1f;或者说高并发的技巧你用过哪些&#xff1f; …
阅读更多...
Webpack生成企业站静态页面 - ajax请求

Webpack生成企业站静态页面 - ajax请求

一些项目因需求不同&#xff0c;如需SEO或小项目&#xff0c;使用angular、react或vue就大材小用了。可以通过webpack、gulp这些构建工具&#xff0c;也能快速完成html页面开发&#xff0c;并且也能使用less/sass/styus等样式预编译功能&#xff0c;以及将js、html分模块、分组…
阅读更多...
【昇腾系列产品应用】英码科技EA500I边缘计算盒子接口使用示例和目标检测算法演示（附视频）

【昇腾系列产品应用】英码科技EA500I边缘计算盒子接口使用示例和目标检测算法演示（附视频）

EA500I是英码科技联合华为昇腾精心打造的AI边缘计算盒子&#xff0c;其搭载昇腾310系列处理器&#xff0c;可提供20TOPS INT8 的计算能力&#xff0c;并设计了丰富的外围接口&#xff0c;包括Type-C系统调试口、LINE音频接口、USB3.0*2、千兆LAN*8、WAN*1、5G/4G、GNSS天线口、…
阅读更多...
构建ELK+Filebeat+kafka+zookeeper大数据日志分析平台

构建ELK+Filebeat+kafka+zookeeper大数据日志分析平台

主机IP 角色 所属服务层 部署服务 192.168.11.11 日志生产 采集层 filebeat 192.168.11.12 日志缓存 数据处理层、缓存层 Zookeeperkafkalogstash 192.168.11.13 192.168.11.14 日志展示 持久、检索、展示层 Logstashelasticsearchkibana 数据流向 filebeat--…
阅读更多...
git仓库太大只下载单个文件或文件夹

git仓库太大只下载单个文件或文件夹

有没有这样的苦恼&#xff1a;仓库太大&#xff0c;只想下载其中某些文件(夹)&#xff1f; 一招解决&#xff1a;bash down_folder_from_git.sh 运行前&#xff0c;先修改开头三个变量 原理: 稀疏检出 让工作树仅包含自定义的文件 #!/usr/bin/bash addrhttps://github.com/fac…
阅读更多...
最新文章

Copyright @ 2022~2023