前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jQuery实现点击开关图片切换

jQuery实现点击开关图片切换

作者头像
王小婷
发布于 2025-05-18 04:58:42
发布于 2025-05-18 04:58:42
11200
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

原型大概是这样的

image

需求:点击右侧的蓝色眼睛,会变成

关键代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* 实现图片切换 */

$(".imgclick").toggle(function(){

$(this).attr("src","img/close.png");

},function(){

$(this).attr("src","img/open.png");

}).attr("src","img/open.png");

其实原理很简单,就是利用toggle的参数切换不同函数。 可以直接复制黏贴的demo

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>

    <body>
        <div>
            <img class="imgclick" src="img/close.png" />
        </div>

        <div>
            <img class="imgclick" src="img/close.png" />
        </div>
    </body>
    <script>
        /* 实现图片切换 */
        $(".imgclick").toggle(function() {
            $(this).attr("src", "img/close.png");
        }, function() {
            $(this).attr("src", "img/open.png");
        }).attr("src", "img/open.png");
    </script>

</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-05-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
搭建一个你的文件共享站
说起文件共享,类似文件站这样的功能。在很久之前我使用过用apache httpd这个方案,这个的话就是太过于简单了。当然是满足需求的(又不是不能用) 今天来分享一个开源的文件共享平台。Pingvin Share 作者的github地址:https://github.com/stonith404/pingvin-share
huolong
2023/08/28
5360
搭建一个你的文件共享站
【Docker项目实战】使用Docker部署PicoShare共享文件平台
江湖有缘
2024/01/22
1.5K1
【Docker项目实战】使用Docker部署PicoShare共享文件平台
【Docker项目实战】使用Docker部署Jirafeau文件共享工具
江湖有缘
2025/01/06
4400
【Docker项目实战】使用Docker部署Jirafeau文件共享工具
【好玩儿的Docker项目】Pingvin Share——一个专注于文件分享的高颜值轻量小工具!
之前和大家介绍过的MicroBin主打的是文本代码分享功能,这周和大家推荐一个专注于文件分享的高颜值轻量小工具——Pingvin Share
二十五画生
2023/01/31
3.4K0
【好玩儿的Docker项目】Pingvin Share——一个专注于文件分享的高颜值轻量小工具!
用NAS搭建一个你的文件共享站,和基友分享你的那些好康的“东西” - 熊猫不是猫QAQ
大部分情况下大家分享nas中的文件都是通过直接生成连接的形式发给朋友,但如果有些东西我没有存在nas中,上传到nas再去生成链接再发给基友,多少有点不方便了,于是文件分享站变有了它存在的意义。我们可以将一些nas中没有存放的文件放上面供基友自行查看。
熊猫不是猫
2023/09/06
8180
用NAS搭建一个你的文件共享站,和基友分享你的那些好康的“东西” - 熊猫不是猫QAQ
【Docker项目实战】使用Docker部署FileGator文件管理器
江湖有缘
2024/02/03
3.1K0
【Docker项目实战】使用Docker部署FileGator文件管理器
【Docker项目实战】在Docker环境下部署go-file文件分享工具
江湖有缘
2023/12/09
1.6K1
【Docker项目实战】在Docker环境下部署go-file文件分享工具
【Docker项目实战】使用Docker部署FastSend文件传输工具
江湖有缘
2025/05/10
1650
【Docker项目实战】使用Docker部署FastSend文件传输工具
极简开源的文件共享系统,无需注册!
PicoShare 一款开源的文件共享系统,专注于提供图片、视频和其他文件的共享服务。项目基于Go语言编写,遵守AGPL开源协议。
永恒君
2023/09/02
8450
极简开源的文件共享系统,无需注册!
【docker】一款轻量的分享工具——Pingvin Share
项目地址:https://github.com/stonith404/pingvin-share
夜梦星尘
2024/08/20
3040
【docker】一款轻量的分享工具——Pingvin Share
PicoShare:轻量级文件共享系统的本地部署与远程访问指南
本篇文章介绍,如何在Linux系统本地部署轻量级文件共享系统PicoShare,并结合Cpolar内网穿透实现公网环境远程传输文件至本地局域网内文件共享系统。
FGGIT
2024/11/19
2640
PicoShare:轻量级文件共享系统的本地部署与远程访问指南
【Docker项目实战】使用Docker部署JmalCloud个人网盘
江湖有缘
2024/01/30
3.6K0
【Docker项目实战】使用Docker部署JmalCloud个人网盘
只使用简单的 JavaScript 创建文件共享型网站
Any Share 是一种简单、轻量、快速的文件共享服务。使用 Javascript 编写,并搭建在 Firebase 平台。
用户11164002
2024/06/17
8130
只使用简单的 JavaScript 创建文件共享型网站
FileCodeBox:Star4.9k,类似百度网盘,小团队、小公司都用得上的文件共享与分享工具,支持设置分享密码,界面清爽简单易用
嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法
小华同学ai
2025/01/27
1540
FileCodeBox:Star4.9k,类似百度网盘,小团队、小公司都用得上的文件共享与分享工具,支持设置分享密码,界面清爽简单易用
【好用的个人工具】Docker环境下部署FileDrop文件共享工具
江湖有缘
2023/12/07
2.8K4
【好用的个人工具】Docker环境下部署FileDrop文件共享工具
【实用的开源项目】使用服务器部署Sharry:真的很好用的文件分享程序!
【实用的开源项目】系列出到第五期了鸭。小俊因为上学以及其他事务的原因已经快三个月没有更新了,那今天为大家介绍一下 Sharry 这一款文件分享程序吧,这篇文章是详细的文字版,若希望查看教程视频,请向下滑动,查看视频,或者直接到 BiliBili 搜索 我是小俊呀 ,查找视频哦!
小俊是我
2022/12/24
1.1K0
【实用的开源项目】使用服务器部署Sharry:真的很好用的文件分享程序!
飞牛 fnos 使用docker部署 Windows 系统:虚拟机的轻量级替代方案
飞牛系统暂缺官方虚拟机,而 dockur/windows 这个开源项目能让 Windows 系统在 Docker 容器中运行,支持多版本(如 win7、win8、win10、win11、Win Server、Tiny Win)和多语言,很适合开发、测试以及学习场景,可快速搭建且自动部署,稳定又高效,是飞牛系统下 Windows 环境搭建的理想之选。
季春二九
2024/12/17
1.8K0
飞牛 fnos 使用docker部署 Windows 系统:虚拟机的轻量级替代方案
【Docker项目实战】使用Docker部署Mikochi文件管理工具
江湖有缘
2023/12/22
1.2K0
【Docker项目实战】使用Docker部署Mikochi文件管理工具
【Docker项目实战】使用Docker部署MicroBin粘贴应用程序
江湖有缘
2024/12/28
1800
【Docker项目实战】使用Docker部署MicroBin粘贴应用程序
【Docker项目实战】使用Docker部署Filestash文件管理器
江湖有缘
2024/09/18
1.1K0
【Docker项目实战】使用Docker部署Filestash文件管理器
推荐阅读
搭建一个你的文件共享站
5360
【Docker项目实战】使用Docker部署PicoShare共享文件平台
1.5K1
【Docker项目实战】使用Docker部署Jirafeau文件共享工具
4400
【好玩儿的Docker项目】Pingvin Share——一个专注于文件分享的高颜值轻量小工具!
3.4K0
用NAS搭建一个你的文件共享站,和基友分享你的那些好康的“东西” - 熊猫不是猫QAQ
8180
【Docker项目实战】使用Docker部署FileGator文件管理器
3.1K0
【Docker项目实战】在Docker环境下部署go-file文件分享工具
1.6K1
【Docker项目实战】使用Docker部署FastSend文件传输工具
1650
极简开源的文件共享系统,无需注册!
8450
【docker】一款轻量的分享工具——Pingvin Share
3040
PicoShare:轻量级文件共享系统的本地部署与远程访问指南
2640
【Docker项目实战】使用Docker部署JmalCloud个人网盘
3.6K0
只使用简单的 JavaScript 创建文件共享型网站
8130
FileCodeBox:Star4.9k,类似百度网盘,小团队、小公司都用得上的文件共享与分享工具,支持设置分享密码,界面清爽简单易用
1540
【好用的个人工具】Docker环境下部署FileDrop文件共享工具
2.8K4
【实用的开源项目】使用服务器部署Sharry:真的很好用的文件分享程序!
1.1K0
飞牛 fnos 使用docker部署 Windows 系统:虚拟机的轻量级替代方案
1.8K0
【Docker项目实战】使用Docker部署Mikochi文件管理工具
1.2K0
【Docker项目实战】使用Docker部署MicroBin粘贴应用程序
1800
【Docker项目实战】使用Docker部署Filestash文件管理器
1.1K0
相关推荐
搭建一个你的文件共享站
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档