jquery实现点击图片切换为另一图片,再次点击恢复到原图片

在项目里，有时候会写这样的开关效果，点击开关来回切换，也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片。

下面是一个小的demo示例：

<!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="data:images/off.png"/></div>       </body><script>/* 实现图片切换 */$(".imgclick").toggle(function() {$(this).attr("src", "images/off.png");}, function() {$(this).attr("src", "images/on.png");}).attr("src", "images/on.png");</script>
</html>

效果是这样的

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。

jquery实现点击图片切换为另一图片,再次点击恢复到原图片相关推荐

如何用js实现点击图片切换为另一图片，再次点击恢复到原图片
如何用js实现点击图片切换为另一图片,再次点击恢复到原图片 <!DOCTYPE html> <html lang="en"> <head>< ...
html:点击图片放大到全屏，再次点击缩回
做手机网页开发时,经常遇到的效果:点击某个不加链接的图片时,图片放大,当再次点击放大的图片时,图片缩回(实质上将层隐藏掉了). 实现思路: 准备原材料:一个遮档整个屏幕的不透明接近黑色的背景层(< ...
php点击字切换验证码,PHP生成图片验证码、点击切换实例 Web程序 - 贪吃蛇学院-专业IT技术平台...
http://www.jb51.net/article/51506.htm 现在让我们来看下 PHP 代码复制代码代码如下: session_start(); function random($le ...
实现点击按钮后,倒计时60秒才能再次点击
转载于:https://www.cnblogs.com/liu201312/p/4447710.html
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
jQuery插件推荐(一) ——图像切换展示
jQuery之所以强大,是因为有无数优秀的技术人员为其没费开发插件.令这个轻巧优秀的Javascript库更加优秀. 1.jquery.soChange.js 首先推荐的是由一名中国的前端–不羁虫开发 ...
20个超棒的CSS3图片切换灯箱效果教程推荐
CSS3中增加了诸多新的特性,借助这些特性,可以实现不可思议的效果.本文带来20个教程,教你如何使用CSS3创建引人注目的图片切换效果和灯箱效果. 点击小标题可以直接看效果 1. 创建带3D灯箱动画 ...
html图片转换特效,css3图片切换效果
本教程将带给大家一些很酷的图片切换效果的制作方法.为了使大家看到不同的效果,我们准备了三种不同的例子:图片切换.全屏幻灯片和一些产品展示.这些效果不仅仅可以运用在幻灯片中.但在我们的例子中,都是以幻灯 ...

jquery实现点击图片切换为另一图片,再次点击恢复到原图片

jquery实现点击图片切换为另一图片,再次点击恢复到原图片相关推荐

最新文章

热门文章