开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让一张照片在点击另一张照片时出现？Javascript、DOM

要实现点击一张照片时显示另一张照片的效果，可以使用JavaScript和DOM操作。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Toggle</title>
    <style>
        #hiddenImage {
            display: none;
        }
    </style>
</head>
<body>
    <img id="firstImage" src="path/to/first/image.jpg" alt="First Image" onclick="toggleImage()">
    <img id="hiddenImage" src="path/to/second/image.jpg" alt="Second Image">
    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

function toggleImage() {
    var firstImage = document.getElementById('firstImage');
    var hiddenImage = document.getElementById('hiddenImage');

    if (hiddenImage.style.display === 'none') {
        hiddenImage.style.display = 'block';
        firstImage.style.display = 'none';
    } else {
        hiddenImage.style.display = 'none';
        firstImage.style.display = 'block';
    }
}

解释

HTML部分：
- 创建两个<img>标签，一个用于显示第一张图片（firstImage），另一个用于显示第二张图片（hiddenImage）。
- 使用CSS将hiddenImage的初始状态设置为display: none，使其不可见。
- 在firstImage上添加onclick事件，当点击时调用toggleImage函数。

JavaScript部分：
- toggleImage函数通过document.getElementById获取两个图片元素。
- 检查hiddenImage的display属性，如果为none，则将其设置为block，并将firstImage的display属性设置为none，反之亦然。

应用场景

这种效果可以用于图片轮播、图片切换、模态框中的图片显示等场景。

参考链接

通过这种方式，你可以实现点击一张照片时显示另一张照片的效果。如果有更多复杂的需求，可以进一步扩展和优化代码。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

EasyPhoto实战体验

EasyPhoto ：一款基于SD Webui UI插件，你只需要上传5到20张自己的半身照，它就可以学习你的面部特征，并生成一个你的AI人像分身。

04

U3D激发拍照新活力，Camera360优化之旅

大家下午好，我是来自Camera360的唐雷，今天与大家一同分享Camera360 iOS端的音频优化。对于一款拍照软件，贴纸、美妆、特效现在已经成为一种标配，而我们最大的区别在于左下角的相册——它支持连拍，不需要拍照预览再去保存。从产品角度，我们最开始只是简单的拍照软件，拍风景再加上一些滤镜处理，到后面开始添加美妆、贴纸等功能，包括短视频也有尝试。

02

获取产品图片白色背景的方法3

无论是手动、半自动、全自动化流程，都可以加入蒙版抠图这个解决方案，其相对创新性使其成为自动化解决方案的最爱方法。

00

设置数组上下区间

每次根据用户点击的那一张图片的索引的上下区间50，这个50可以自己设置，就是最大的照片数量，

02

CAN-EYE计算植被冠层参数的方法

在文章植被冠层参数计算软件CAN-EYE的下载与安装中，我们介绍了CAN-EYE软件的下载、安装方法；本文就对该软件的具体使用方法进行介绍。

02

百年百图の中国（1900-1999）：另类python爬虫和PIL拼图

标题有点长，也有点怪。前半部分文艺向，后半部分python技术向。目的就是用PIL库得到100张图的拼图（成果图见文末）。

02

学会这些修图技巧，让你的女神成为朋友圈中的主角

在修图的过程中，我们经常使用到的就是液化功能，液化功能非常强大，它能够轻松地实现瘦脸、瘦腿、瘦腰等功能，我们以下面这张照片为例：

04

卷积神经网络（五） ——面部验证与神经风格转换

卷积神经网络（五） ——面部验证与神经风格转换（原创内容，转载请注明来源，谢谢）一、概述本文主要讨论面部验证和神经风格转换两种技术，都是CNN的实际应用。二、面部验证 1、人脸识别与面部验证

06

高铁新建人脸识别系统，如何做到整容也可以识别逃犯？

如今人脸识别系统已经广泛应用于我们的生活中，如数码相机、门禁系统、机场的安全设施、桌面软件、互联网应用（如Facebook）等等[1]。然而今日的一则关于“高铁人脸识别抓逃犯”的新闻一出[2]，在评论中又引发了一阵阵怀疑。怀疑的中心问题在于，人脸识别系统真的能准确无误地在数以亿计的面孔中找出匹配的嫌疑人吗？降维：减少冗余信息完整的人脸识别系统一般由多个模块组成，在进行人脸识别之前首先要进行人脸检测（即在一张完整的图片中探测到人脸区域），以及图片的预处理、归一化等步骤（例如自动把倾斜的照片摆正）。本文就

06

微信发个原图，居然隐私曝光这么多…可怕

前几天，有一件这样的事情引起了网友们的关注，话题是：微信发原图或泄露位置信息，不知道大家有没有留意。

01

微软自拍应用一键美颜背后的人工智能技术（附论文下载）

日前，微软宣布推出一款图片美化应用——微软自拍（Microsoft Selfie），它能够针对照片中出现的所有人脸的年龄和性别进行差异化一键自动美颜和降噪、补光，微软亚洲研究院视觉计算组主管研究员袁路

07

胜过iPhone XS？Google Pixel的“夜视功能”是怎样炼成的

【导读】随着智能手机的不断发展成熟，为了寻找差异化的厂商不断增加摄像头的数量。然而，摄像头的数量越多，就代表拍照的质量越好吗？

02

AI绘画：Stable Diffusion 终极炼丹宝典：从入门到精通

历经耗时数十个小时，总算将这份Stable Diffusion的使用教程整理妥当。

04

BR2022下载安装包 br中文版一分钟安装教程各版本安装包-经验分享

BR是 Bridge 缩写,Adobe Bridge 是Adobe公司开发的一个组织工具程序,定义就是数字资产管理软件和照片管理工具。可以使用 Bridge创建管理使用Adobe所有软件创建任何格式的文件。以及查看有关从相机导入的数据，如照片按尺寸、相机型号、镜头类型、曝光时间等方面。

01

Bitmap那些事之基础知识

前言：本来我是做电视应用的，但是因为公司要出手机，人员紧张，所以就抽调我去支援一下，谁叫俺是雷锋呢！我做的一个功能就是处理手机中的应用ICON，处理无非就是美化一下，重新与底板进行合成和裁剪，用到了很多Bitmap的知识。本来之前一直想写一些关于Bitmap的博客，正好这是个机会，因此Bitmap那些事系列博客诞生了。这个系列我会把学习Bitmap的一些知识发布出来供大家参考和交流。在手机中图片一般都是指Bitmap图片，为什么要说Bitmap呢？因为大家在开发应用的时候，都会使用一些图片来表现UI，

06

Adobe Bridge（Br）软件干货分享-下载及安装教程各版本下载

br2022是一款功能非常专业强大的数字资产管理软件和照片管理工具，全称名为Adobe Bridge 2022，其软件旨在为用户提供便捷的预览、整理、编辑和查找等等功能。有了这款软件，用户可以轻松的使用缩略图和预览功能可视化访问自己创意项目所需的所有多媒体资源，如Photoshop、InDesign、Illustrator等等Adobe和非Adobe所有的应用程序文件，而且用户还可以将文件资源按照需要拖移到软件的版本面中进行预览，甚至向其中添加元数据。此外，用户还能在该软件中还可以打开和编辑相机原始数据文件，并将它们保存为与 Photoshop兼容的格式，同时还能在不启动Photoshop的情况下直接在“相机原始数据”对话框中编辑图像设置。

02

排行榜第一的美图APP上，美女发现自拍竟被AI拿去生成果照？

如果说，有个价格实惠、操作简单的生成式APP能满足你的愿望。只不过，这个软件会自动生成你的果照，你会使用吗？

02

用深度学习拯救手抖星人！Facebook详解全景照片修复技巧

陈桦编译整理量子位报道 | 公众号 QbitAI 拍全景照片，重要的是手要稳，手要稳，手要稳……或者支个三角架。上面视频中这位小姐姐的水平，可以说是非常赞了，量子位就认识一些货真价实、经常手抖

07

lightroom修图软件哪里下载？lr电脑版软件安装，Lr2023中文版

如果你想要一张照片，但却不知道如何达到理想的效果，那么Lightroom Classic是你最好的选择。它是一款全新的桌面编辑工具，能够使你的照片呈现出完美的效果，并且增强了许多功能，比如增强色彩、去除杂物、矫正倾斜等。

03

图片上传预览插件制作思路及Demo分享

一旦选择的路径被改变就把图片上传至服务器，然后就返回图片在服务器端的地址，并且赋值到img元素上。

02

vue之图片切换

图片切换 <body>

01

Facebook批量优化360照片

自去年推出该功能以来，人们已经向Facebook上传了超过7000万张360度照片。Facebook使用多种方法来捕获360度照片和视频，这使人们可以与他们的朋友分享身临其境的体验。如果您拥有专用的360度相机，如理光Theta S或Giroptic iO，则可以从相机直接发布到Facebook。而现在大部分高端Android和iOS智能手机也都拥有全景模式的相机，可用于拍摄360度照片。

01

人机交互，6种最被BAT认可的加载模式

作为用户体验设计师，不管是产品、交互还是UI，都习惯于站在人机交互的角度去思考产品设计问题，在这个过程中我们往往会忽略了一个重要的过程：数据传输。先看下面这张图。用户、客户端、服务器用户与客户端进

04

谷歌发布PhotoScan:拍摄无炫光的图片

本文介绍了使用智能手机应用进行照片扫描并去除眩光的方法，通过使用增强现实技术对照片进行预处理，消除眩光，提高照片质量。主要步骤包括拍摄照片、对齐照片、去除眩光和优化照片。该算法可以在手机上实时运行，具有快速、准确和易用的特点，适用于各种扫描条件，包括无光泽和光泽打印，照片内部或外部相册，杂志封面等。

03

Adobe Bridge软件怎么获取？Br安装教程（含全版本安装包）

BR是 Bridge 缩写,Adobe Bridge 是Adobe公司开发的一个组织工具程序,定义就是数字资产管理软件和照片管理工具。可以使用 Bridge创建管理使用Adobe所有软件创建任何格式的文件。以及查看有关从相机导入的数据，如照片按尺寸、相机型号、镜头类型、曝光时间等方面。

01

人脸识别可以分辨同性恋？论科技研发和伦理道德之间的矛盾 | 黑科技

基于性取向科学理论，该人脸识别系统给出明确的数据和判断，因此带来的杀伤力也更加明显。据悉，近日，两名斯坦福大学研究人员开发出一套神经网络算法，可以通过人脸识别来判断出一个人的性取向，且该算法的测试结果准确率极高。值得注意的是，该算法跟踪的面部信息不仅仅是用户的表情等特征，它还检测包括一些遗传基因和激素等在面部的特征体现。具体来看，研究的关键在于，它主要基于产前激素理论（PHT）。该理论认为，人体的某些激素会在胎儿性别分化中发挥作用，同时后期也会影响成人的性取向，目前，产前激素被视为可能是成人性取向的主

00

一个 Vue 页面的内存泄露分析

什么是内存泄露？内存泄露是指new了一块内存，但无法被释放或者被垃圾回收。new了一个对象之后，它申请占用了一块堆内存，当把这个对象指针置为null时或者离开作用域导致被销毁，那么这块内存没有人引用它了在JS里面就会被自动垃圾回收。但是如果这个对象指针没有被置为null，且代码里面没办法再获取到这个对象指针了，就会导致无法释放掉它指向的内存，也就是说发生了内存泄露。为什么代码里面会拿不到这个对象指针了呢，举一个例子：

03

利用jQuery手动实现一个轮播图

目前有很多的轮播图插件，但是有些时候需要兼容低版本浏览器的时候，很多插件就不再兼容，因此我们需要自己手动的实现轮播图的功能，下面给大家简单的介绍一下如何使用jQuery开发一个轮播图。

05

Pixel 2 XL，软件为王

在用了六年多 iPhone 后，程序君对 iOS 系统已经深深地审美疲劳，累觉不爱。新出的 iPhone X 噱头不少，从功能上来看让人大失所望。正好，pixel 2 系列几乎同期推出，程序君便改换门庭，投入 Pixel 2 XL（以下简称 2XL）的怀抱。月初拿到了 2XL，天天机不离手，各种发朋友圈晒功能。朋友说，少得瑟，有那时间都能写篇文章了。想想也是，于是在拖了一又四分之一周之后，有了这篇文章。一般的评测文章都会来个开箱报告，以图服人。可开箱照这玩意网上多得是，一搜便是，2XL 又不属于那种你可

06

MLX90640 红外热成像仪测温传感器模块PC端操作教程

本设备没有自带显示设备（屏幕），若要进行实时图像查看或者参数修改需要连接到计算机或者手机，并由对应的工具软件完成上述工作。若要连接到计算机，则需要预先安装 USB 驱动程序，若要连接到手机，则直接使用 APP 程序即可（无需安装驱动程序）。计算机安装驱动程序的步骤如下：

02

机器也有品味：谷歌最新算法让街景图具有专业摄影师审美

大数据文摘作品，转载要求见文末编译 | 钱天培、Aileen、Yawei Xia 后台回复“机器品味”，可获得论文原文链接想拍出专业级的照片，又没有单反、没学过专业的摄影教程？Google最新研发的照片处理黑科技将成为你的救星！这项基于深度学习的技术能够将Google Street View的全景照片处理成以假乱真的专业照片，40%被处理过的高分照片在“图林测试”中获得了专业人士的认可。一起来看看！机器学习在有着明确目标定义的领域有非常强大的应用。在那些黑白分明的任务中，机器学习大有用武之地，比如正确

02

专访｜成立仅两年，云从如何「征服」中国银行总行？

机器之心原创作者：虞喵喵 5 月 23 日，国内知名人工智能创业公司云从科技向机器之心透露，已拿到中国银行总行订单，其人脸识别软件将在中国银行总行、境内分支机构、境外分支机构以及控股子公司全面应用。机器之心第一时间与云从科技取得联系，就其如何在成立两年时间便拿下总行订单，同时如何与五大行中的四家签约合作展开讨论。攻略中行，首先要满足技术和工程要求在此前机器之心的专访中，云从科技创始人周曦就曾多次强调银行的「2 小时、4 小时、8 小时原则」——如果银行系统宕机 2 小时，该行行长就要去当地人民银行上

05

华为手机被diss：AI拍照涉造假，国外网友又炸锅了

短短两天，一条Nova 3i的广告就在Youtube上获得了270万的播放量，各大论坛探讨热度尤其高涨，但随着热度而来的，却是一个负面词汇：AI拍照虚假宣传。

02

零基础可上手 | 手把手教你用Cloud AutoML做毒蜘蛛分类器

近日，一名叫Matt Fraser的小哥用Cloud AutoML制作了一个分类器，能识别分类澳大利亚的各种毒蜘蛛。

06

开源图像风格迁移，快看看大画家的潜力股

作者 | 杜飞，川大计算机小硕，目前从事算法研究工作，对GAN的“魔法”情有独钟。

02

树莓派更新系统源

所有文章都是改软件源，其实还有一个叫系统源的东西~，实际上还存在一个系统更新源（/etc/apt/sources.list.d/raspi.list）

04

CDN系列学习文章（一）——CDN介绍篇

内容分发网络（Content Delivery Network，CDN）是在现有 Internet 中增加的一层新的网络架构，由遍布全国的高性能加速节点构成。这些高性能的服务节点都会按照一定的缓存策略存储您的业务内容，当您的用户向您的某一业务内容发起请求时，请求会被调度至最接近用户的服务节点，直接由服务节点快速响应，有效降低用户访问延迟，提升可用性。 ------------------出自腾讯云

06

系统设计：Instagram照片共享服务

让我们设计一个像Instagram这样的照片共享服务，用户可以上传照片与其他用户共享。类似服务：Flickr、Picasa

机器学习理解上最新案例：“以貌取物”与“以貌取书”（附下载）

【新智元导读】本文介绍 MIT Technology Review 最近报道了关于机器学习的两项研究成果：让机器学会对人产生“第一印象”、能凭借书的封面判断内容。这两项研究对于增强机器“智能”有很大启示。机器视觉算法学会“以貌取人” 社会心理学家很早就发现，人们能在一瞬间对一个人作出评价，所依据的仅仅是对方的外表，特别是面容。我们使用这些评价来判定初次见面的人是否值得信任，是否聪明，是支配型还是社交型，是否幽默等等。这些判断可能正确，也可能不正确，而且一点也不客观，但它们具有一致性。在同一情形下让不同

06

130亿光年：刚刚，NASA发布了宇宙最深处的影像

机器之心报道编辑：泽南这是人类迄今为止获得的最远、最详细早期宇宙视图。北京时间 7 月 12 日早晨，美国宇航局（NASA）公布了詹姆斯・韦伯太空望远镜拍摄的第一张全彩图像，这是深空天文台的一次重要时刻，标志着其进入科学研究第一年的开始。这是一张令人难以置信的精细图像，让我们可以从地球角度观察宇宙最遥远星系的背景 —— 它展示了望远镜的强大能力，并为即将到来的更令人惊叹的宇宙图像提供了预告。这张照片是 NASA 计划在本周发布的少数全彩图像之一，标志着詹姆斯・韦伯太空望远镜（JWST）科学探索任

03

设计必备资源LR软件Lightroom Classic下载

Adobe Lightroom是一款专业的照片管理和编辑软件，主要用于数字照片的处理和后期制作。下面是一些Lightroom的使用说明：

02

Unity 如何实现卡片循环滚动效果

功能需求如图所示，点击下一个按钮，所有卡片向右滚动，其中最后一张需要变更为最前面的一张，点击上一个按钮，所有卡片向左滚动，最前面的一张需要变更为最后一张，实现循环滚动效果。

02

人工智能研究人员从静止图像创建逼真的循环视频

开发一种将单张照片变成可信视频的方法一直是该领域的一个挑战。华盛顿大学和 Facebook 的研究人员使用深度学习将静止图像转换为逼真的动画循环视频。

02

11. 图像合成与图像融合

我们经常看到一些很奇妙的PS技术，例如下面这张，它把1928年的一位叫做Frankie Yale的黑帮老大被杀时的照片，与现在这栋房子的照片无缝融合在一起：

05

Html5 学习系列（五）Canvas绘图API快速入门（2）

本文介绍了Canvas的基本用法，包括绘制文本、矩形、圆形、图像、动画、混合模式、缓存、绘制像素、阴影、裁剪、抗锯齿、半透明、Canvas3D以及一个自定义绘图的示例。通过这些基础用法，可以快速上手HTML5 Canvas，实现各种复杂的效果。

08

旅行中不可或缺的软件

每次出去玩之前都会上网搜很多很多的攻略。但是发现更多的是游记；游记里面的大部分信息是介绍景色、感悟等；其实除了这部分信息，怎么去，有什么注意事项等等更是很多人想要关注的事情。然而要么是因为玩的太久忘记了，要么是没有想到，很多游记对于这部分信息的记录寥寥。其实这部分信息的记录并不复杂，正好有朋友问我，因此就专门写篇文章把自己的一些经验分享一下。作为一个高逼格的工程师，肯定是要通过各种技术手段来协助自己记录。不然好不容易出去玩，不能尽兴，还要花很多心思来记录各种时间点和经历也太伤神了，同时也失去了旅行的意义。

06

寻找下一款Prisma APP：深度学习在图像处理中的应用探讨

在9月23日到9月24日的MDCC 2016年中国移动者开发大会“人工智能与机器人”专场中，阿里云技术专家周昌进行了题为《寻找下一款Prisma APP：深度学习在图像处理中的应用探讨》的演讲。演讲中，他主要介绍深度学习在图像处理领域中的应用，主要内容包括：传统的图像处理：如超分辨、灰度图彩色化、2D/3D转换等；图像/视频风格化；图像生成。

03

【CBNT】我们看到黑洞了！这是分布式的杰作啊.....

北京时间 2019 年 4 月 10 日晚，我们成为了历史上第一批看到黑洞真实姿态的人类。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭