使用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);});});

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

YOLOv8改进 | 检测头篇 | 2024最新HyCTAS模型提出SAttention(自研轻量化检测头 -> 适用分割、Pose、目标检测)

一、本文介绍 本文给大家带来的改进机制是由全新SOTA分割模型(Real-Time Image Segmentation via Hybrid Convolutional-TransformerArchitecture Search)HyCTAS提出的一种SelfAttention注意力机制,论文中叫该机制应用于检测头当中(论文中的分割效果展现目前是最好的)。我…

【Ubuntu】Ubuntu LTS 稳定版更新策略

1、确保下载环境 sudo apt update && sudo apt upgrade -y sudo apt autoremove 2、安装更新管理器 sudo apt install update-manager-core -y 3、设置只更新稳定版 sudo vim /etc/update-manager/release-upgrades 4、开始更新&#xff0c;耐心等待 sudo do-re…

深入浅出的揭秘游标尺模式与迭代器模式的神秘面纱 ✨

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自&#xff1a;设计模式深度解析&#xff1a;深入浅出的揭秘游标尺模式与迭代…

【测试开发学习历程】Python数据类型:字符串-str(上)

目录 1 Python中的引号 2 字符串的声明 3 字符串的切片 4 字符串的常用函数 4.1 len()函数 4.2 ord()函数 4.3 chr()函数 5 字符串的常用方法&#xff08;内置方法/内建方法&#xff09; 5.1 find()方法 5.2 index()方法 5.3 rfind()方法 5.4 rindex()方法 1 Python…

SAP-CO主数据之统计指标创建-<KK01>

公告&#xff1a;周一至周五每日一更&#xff0c;周六日存稿&#xff0c;请您点“关注”和“在看”&#xff0c;后续推送的时候不至于看不到每日更新内容&#xff0c;感谢。 目录 一、背景&#xff1a; 成本中心主数据创建&#xff1a;传送门 成本要素主数据创建&#xff1…

Linux内核之最核心数据结构之二:struct inode(三十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

图腾柱PFC:HP1010为您的电动两轮车之旅提供绿色,高效,安全的动力

电动两轮车不仅为当今生活提供了便利&#xff0c;更是一种健康和绿色的出行方式。想象一下&#xff0c;在经过一整晚的充分休息&#xff0c;骑上爱车&#xff0c;满血复活的准备开始新的一天。您会愿意带着如何给心爱的两轮车充电的担心开始这一天吗&#xff1f; 随着越来越…

MySQL---触发器

一、介绍 触发器是与表有关的数据库对象&#xff0c;指在insert/update/delete之前(BEFORE)或之后(AFTER)&#xff0c;触发并执行触发器中定义的SQL语句集合。触发器的这种特性可以协助应用在数据库端确保数据的完整性, 日志记录 , 数据校验等操作 。 使用别名OLD和NEW来引用触…

CorelDRAW25.0.0.230中文最新开心和谐版本

CorelDRAW是一款非常流行的矢量图形设计软件&#xff0c;其25.0.0.230版本带来了许多新特性和更新内容。以下是我所能提供的相关信息&#xff1a; 首先&#xff0c;关于特性方面&#xff0c;CorelDRAW 25.0.0.230版本具有强大的矢量编辑功能&#xff0c;用户可以轻松创建和编辑…

DSVPN实验报告

一、分析要求 1. 配置R5为ISP&#xff0c;只能进行IP地址配置&#xff0c;所有地址均配为公有IP地址。 - 在R5上&#xff0c;将接口配置为公有IP地址&#xff0c;并确保只进行了IP地址配置。 2. R1和R5之间使用PPP的PAP认证&#xff0c;R5为主认证方&#xff1b;R2于R5之间…

ES6 学习(三)-- es特性

文章目录 1. Symbol1.1 使用Symbol 作为对象属性名1.2 使用Symbol 作为常量 2. Iterator 迭代器2.1 for...of循环2.2 原生默认具备Interator 接口的对象2.3 给对象添加Iterator 迭代器2.4 ... 解构赋值 3. Set 结构3.1 初识 Set3.2 Set 实例属性和方法3.3 遍历3.4 相关面试题 4…

a = 3中的3在栈中还是堆中?

1、栈区&#xff08;stack&#xff09; 由编译器自动分配释放&#xff0c;存放函数的参数值&#xff0c;局部变量的值等。 2、堆区&#xff08;heap&#xff09; 是一个可动态申请的内存空间&#xff08;其记录空闲内存空间的链表由操作系统维护&#xff09;&#xff0c;在j…

基于js css的瀑布流demo

要实现照片按照瀑布流展示&#xff0c;写个小demo&#xff0c;记录下。 瀑布流实现思路如下&#xff1a; CSS 弹性布局对 3 列按横向排列&#xff0c;对每一列内部按纵向排列 html代码&#xff1a; <div class"content"></div> css代码&#xff1a; …

基于SSM学生信息管理系统

采用技术 基于SSM学生信息管理系统的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringMVCMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 总体功能设计 登录页面 后台首页 学生信息页面 添加学生用户 编辑…

动态规划刷题(算法竞赛、蓝桥杯)--导弹拦截(线性DP)

1、题目链接&#xff1a;[NOIP1999 提高组] 导弹拦截 - 洛谷 #include <bits/stdc.h> using namespace std; const int N2e55; int a[N],x,n; int b[N],len;int main(){while(cin>>x)a[n]x;//求最长不上升子序列 b[0]2e9;//初始化为无穷大for(int i1;i<n;i){if(…

计算机专业在找工作时的注意事项

目录 说在前面关于我一些忠告关于简历关于银行写在最后 说在前面 满满的求生欲。我不是什么大佬&#xff0c;更没有能力教大家什么。只是看到有不少学弟学妹&#xff0c;还在为找一份工作焦头烂额&#xff0c;却没有努力的方向。所以这里斗胆给计算机相关专业的学弟学妹们的一…

进程知识点

引用的文章&#xff1a;操作系统——进程通信&#xff08;IPC&#xff09;_系统ipc-CSDN博客 面试汇总(五)&#xff1a;操作系统常见面试总结(一)&#xff1a;进程与线程的相关知识点 - 知乎 (zhihu.com) 二、进程的定义、组成、组成方式及特征_进程的组成部分必须包含-CSDN博…

江协科技STM32:按键控制LED光敏传感器控制蜂鸣器

按键控制LED LED模块 左上角PA0用上拉输入模式&#xff0c;如果此时引脚悬空&#xff0c;PA0就是高电平&#xff0c;这种方式下&#xff0c;按下按键&#xff0c;引脚为低电平&#xff0c;松下按键&#xff0c;引脚为高电平 右上角PA0&#xff0c;把上拉电阻想象成弹簧 当按键…

c++中的菱形继承

c中的菱形继承 class Animal { public:int m_age; }; class Sheep:public Animal {}; class Tuo:public Animal{}; class SheepTuo :public Sheep , public Tuo{}; SheepTuo st; st.m_age 18; m_age是谁的无法区分 class Animal { public:int m_age; }; class Sheep:virtua…

李宏毅【生成式AI导论 2024】第5讲 让语言模型彼此合作,把一个人活成一个团队

GPD4,它也有非常强大的能力。但是GPT4如果跟其他的语言模型合作,他们其实可以发挥1加1大于二的力量。 为什么要让模型合作? 那怎么让模型彼此合作呢?有很多不同的方式。一个可能性是假设你现在手边就有一堆语言模型,他们可能有不同的能力使用,他们可能有不同的成本局来…