当前位置： 首页 > news >正文

点击图片1.全屏阅览2.下载3.关闭 纯纯html css js

news 2025/6/24 8:22:13

要实现图片点击全屏预览的功能，可以使用JavaScript和CSS来实现。以下是一个简单的示例代码：

html

<!DOCTYPE html>
<html>
<head><meta charsett="UTF-8"><title>图片点击全屏预览</title><style>/* 全屏预览样式 */.fullscreen {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);display: flex;justify-content: center;align-items: center;z-index: 9999;}.fullscreen img {max-width: 90%;max-height: 90%;}.fullscreen img:hover {cursor: pointer;}/* 关闭按钮样式 */.close-btn {position: absolute;top: 10px;right: 10px;color: #fff;font-size: 24px;cursor: pointer;}/* 下载按钮样式 */.download-btn {position: absolute;bottom: 10px;right: 10px;color: #fff;font-size: 24px;cursor: pointer;}</style>
</head>
<body><img src="image.jpg" alt="图片" onclick="openFullscreen(this)"><script>function openFullscreen(img) {// 创建全屏预览容器var fullscreenDiv = document.createElement("div");fullscreenDiv.classList.add("fullscreen");// 创建关闭按钮var closeBtn = document.createElement("span");closeBtn.classList.add("close-btn");closeBtn.innerHTML = "&times;";closeBtn.onclick = function() {closeFullscreen();};fullscreenDiv.appendChild(closeBtn);// 创建下载按钮var downloadBtn = document.createElement("span");downloadBtn.classList.add("download-btn");downloadBtn.innerHTML = "&#x2193;";downloadBtn.onclick = function() {downloadImage(img.src);};fullscreenDiv.appendChild(downloadBtn);// 创建图片元素var fullscreenImg = document.createElement("img");fullscreenImg.src = img.src;fullscreenDiv.appendChild(fullscreenImg);// 添加全屏预览容器到页面document.body.appendChild(fullscreenDiv);// 禁用滚动document.body.style.overflow = "hidden";}function closeFullscreen() {// 移除全屏预览容器var fullscreenDiv = document.querySelector(".fullscreen");fullscreenDiv.parentNode.removeChild(fullscreenDiv);// 启用滚动document.body.style.overflow = "auto";}function downloadImage(src) {// 创建一个隐藏的链接并设置下载属性var link = document.createElement("a");link.href = src;link.download = "image.jpg";link.style.display = "none";// 将链接添加到页面并模拟点击document.body.appendChild(link);link.click();document.body.removeChild(link);}</script>
</body>
</html>

在上面的代码中，我们首先定义了一个全屏预览的样式，并在点击图片时调用openFullscreen函数。该函数会创建一个全屏预览容器，并在容器中显示图片。同时，我们还创建了关闭按钮和下载按钮，分别用于关闭全屏预览和下载图片。

点击关闭按钮时，调用closeFullscreen函数，移除全屏预览容器，并启用滚动。

点击下载按钮时，调用downloadImage函数，创建一个隐藏的链接，并设置链接的下载属性，然后模拟点击链接实现图片下载。

请注意，这只是一个简单的示例，实际的图片全屏预览功能可能需要更多的优化和处理，例如支持多张图片预览、滑动切换等。根据具体需求，您可以根据上述示例进行扩展和修改。

相关文章：

点击图片1.全屏阅览2.下载3.关闭 纯纯html css js

要实现图片点击全屏预览的功能&#xff0c;可以使用JavaScript和CSS来实现。以下是一个简单的示例代码&#xff1a; html <!DOCTYPE html> <html> <head><meta charsett"UTF-8"><title>图片点击全屏预览</title><style>…...

编程日记 2023/7/30 9:16:30

科技项目验收测试：验证软件产品功能与性能的有效手段

科技项目验收测试是验证软件产品功能与性能的重要手段&#xff0c;在项目开发中起到了至关重要的作用。本文将从产品质量、需求验证、性能测试等方面&#xff0c;探讨科技项目验收测试的有效手段。 1、产品质量保证是验收测试的核心 科技项目验收测试的核心目标是验证软件产品…...

编程日记 2023/7/30 9:15:29

Spring MVC学习笔记，包含mvc架构使用，过滤器、拦截器、执行流程等等

&#x1f600;&#x1f600;&#x1f600;创作不易&#xff0c;各位看官点赞收藏. 文章目录 Spring MVC 习笔记1、Spring MVC demo2、Spring MVC 中常见注解3、数据处理3.1、请求参数处理3.2、响应数据处理 4、RESTFul 风格5、静态资源处理6、HttpMessageConverter 转换器7、过…...

编程日记 2023/7/30 9:14:27

【LeetCode 算法】Linked List Cycle 环形链表

文章目录 Linked List Cycle 环形链表问题描述&#xff1a;分析代码哈希快慢指针 Tag Linked List Cycle 环形链表 问题描述&#xff1a; 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达…...

编程日记 2023/7/30 9:13:26

RedHat7.9安装mysql8.0.32 ↝ 二进制方式

RedHat7.9安装mysql8.0.32 ↝ 二进制方式 一、rpm方式安装1、检查是否安装了mariadb2、下载mysqlmysql8.0.323、上传解压4、创建安装目录&#xff0c;拷贝解压后的文件至安装目录/usr/local/mysql8.0/5、创建相关目录&#xff0c;开始安装6、创建mysql组和用户7、更改安装目录归…...

编程日记 2023/7/30 9:12:24

数据库面试题题

题干&#xff1a; -- 子查询 CREATE TABLE emp( empno INT, ename VARCHAR(50), job VARCHAR(50), mgr INT, hiredate DATE, sal DECIMAL(7,2), comm DECIMAL(7,2), deptno INT ) ; INSE…...

编程日记 2023/7/30 9:11:20

瑞吉外卖项目 基于spring Boot+mybatis-plus开发 超详细笔记，有源码链接

源码地址&#xff1a;https://gitee.com/programmer-xiao-kai/reggie_tack_out 前置知识&#xff1a; Java基础知识Java Web vueSpring BootSSMMaven 软件开发流程 角色分工 项目经理:对整个项目负责&#xff0c;任务分配、把控进度产品经理:进行需求调研&#xff0c;输出需…...

编程日记 2023/7/30 9:10:19

Redis Cluster 在Spring中遇到的问题

Redis集群配置可能会在运行时更改。可以添加新节点&#xff0c;可以更改特定插槽的主节点。还有可能因为master宕机或网络抖动等原因&#xff0c;引起了主从切换。 无法感知集群槽位变化 SpringBoot2.x 开始默认使用的 Redis 客户端由 Jedis 变成了 Lettuce&#xff0c;但是当…...

编程日记 2023/7/30 9:09:18

linux远程桌面管理工具 xrdp

Xrdp 是一个微软远程桌面协议&#xff08;RDP&#xff09;的开源实现&#xff0c;它允许你通过图形界面控制远程系统。通过 RDP&#xff0c;你可以登录远程机器&#xff0c;并且创建一个真实的桌面会话&#xff0c;就像你登录本地机器一样。 如何在Ubuntu 20.04 上安装 Xrdp 服…...

编程日记 2023/7/30 9:08:17

硬件-8-操作系统的历史

操作系统的最强入门科普&#xff08;Unix/Linux篇&#xff09; 操作系统的发展史&#xff08;DOS/Windows篇&#xff09; Mac操作系统进化史 手机操作系统的沉浮往事&#xff08;上&#xff09; 手机操作系统的沉浮往事&#xff08;下&#xff09; 1 操作系统种类 我们天天都…...

编程日记 2023/7/30 9:07:16

self.register_buffer()中的值发生变化

PyTorch中定义模型时&#xff0c;有时候会遇到self.register_buffer(name, Tensor)的操作&#xff0c;该方法的作用是定义一组参数&#xff0c;该组参数的特别之处在于&#xff1a;模型训练时不会更新&#xff08;即调用 optimizer.step() 后该组参数不会变化&#xff0c;只可人…...

编程日记 2023/7/30 9:06:15

[Tools: Pycharm] Bug合集

1. Debug mode&#xff1a;Pycharm不显示变量值&#xff08;Unable to display frame variables&#xff09;&#xff1b;在python console中交互不输出值 选择Gevent compatible&#xff1a;File > Settings > Build, Execution, Deployment > Python Debugger >…...

编程日记 2023/7/30 9:05:14

【JAVASE】循环结构

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 循环 1. 循环结构1.1 while 循环1.2 bre…...

编程日记 2023/7/30 9:04:12

NoSQL之Redis配置使用

目录 一、关系数据库与非关系型数据库 1.1.关系型数据库的概述 1.2关系型数据库的优缺点 1.2.1优点 1.2.2缺点 1.3.非关系型数据库的概述 二.关系数据库与非关系型数据库的区别 2.1数据存储方式不同 2.2扩展方式不同 2.3对事务性的支持不同 2.4非关系型数据库产生背景 2…...

编程日记 2023/7/30 9:03:10

Ansible最佳实践之Playbook使用过滤器处理网络地址

写在前面 使用过滤器检查、验证和操作包含网络信息的变量理解不足小伙伴帮忙指正 傍晚时分&#xff0c;你坐在屋檐下&#xff0c;看着天慢慢地黑下去&#xff0c;心里寂寞而凄凉&#xff0c;感到自己的生命被剥夺了。当时我是个年轻人&#xff0c;但我害怕这样生活下去&#xf…...

编程日记 2023/7/30 9:02:07

测试常见前端bug

目录 协作 测试方法 标签&#xff1a;标签 内容/ref/ 判断 arr&&arr.length 交互 样式不生效&#xff1a;devtools查找&#xff0c;编译前的标签&#xff0c;运行时不一定存在 可交互的需要提示 hover样式 没有交互逻辑&#xff0c;就不要设置交互 无法交互…...

编程日记 2023/7/30 9:01:06

【Python数据分析】Python常用内置函数（一）

&#x1f389;欢迎来到Python专栏~Python常用内置函数&#xff08;一&#xff09; ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文…...

编程日记 2023/7/30 9:00:05

OpenCV图像处理-图像分割-MeanShift

MeanShift 1. 基本概念2.代码示例 1. 基本概念 MeanShift严格说来并不是用来对图像进行分割的&#xff0c;而是在色彩层面的平滑滤波。它会中和色彩分布相近的颜色&#xff0c;平滑色彩细节&#xff0c;侵蚀掉面积较小的的颜色区域&#xff0c;它以图像上任意一点P为圆心&…...

编程日记 2023/7/30 8:59:03

【Rust 基础篇】Rust Trait 实现：灵活的接口抽象

导言 Rust是一种以安全性和高效性著称的系统级编程语言&#xff0c;其设计哲学是在不损失性能的前提下&#xff0c;保障代码的内存安全和线程安全。为了实现这一目标&#xff0c;Rust引入了"所有权系统"、"借用检查器"等特性&#xff0c;有效地避免了常见…...

编程日记 2023/7/30 8:58:02

【嵌入式Linux项目】基于Linux的全志H616开发板智能家居项目（语音控制、人脸识别、安卓APP和PC端QT客户端远程操控）有视频功能展示

目录 一、功能需求 二、开发环境 1、硬件&#xff1a; 2、软件&#xff1a; 3、引脚分配&#xff1a; 三、关键点 1、设计模式之工厂模式 2、wiringPi库下的相关硬件操作函数调用 3、语音模块的串口通信 4、线程 5、摄像头的实时监控和拍照功能 6、人脸识别 四、编…...

编程日记 2023/7/30 8:57:01

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/6/24 2:10:54

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/6/21 19:01:12

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/6/17 9:07:51

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/6/21 12:53:07

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/6/20 11:39:17

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/6/21 14:39:12

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/6/21 13:31:42

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/6/21 2:22:29

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/6/24 0:22:10

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/6/21 7:26:54