原型大概是这样的

image

需求：点击右侧的蓝色眼睛，会变成

关键代码：

/* 实现图片切换 */

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

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

},function(){

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

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

其实原理很简单，就是利用toggle的参数切换不同函数。
可以直接复制黏贴的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="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>

jQuery实现点击开关图片切换的更多相关文章

  1. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

  2. 基于jQuery商城网站全屏图片切换代码

    基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slid ...

  3. jQuery仿京东首页广告图片切换图片轮播

    1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  5. jquery roundabout幻灯片插件3d图片切换支持图片旋转切换滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Fragment生命周期及实现点击导航图片切换fragment，Demo

    PS:Fragment简介 Fragment是Android3.0后引入的一个新的API,他出现的初衷是为了适应大屏幕的平板电脑, 当然现在他仍然是平板APP UI设计的宠儿,而且我们普通手机开发也会 ...

  7. java登录点击验证码图片切换验证码无效

    1.问题:我在写一个登录时需要添加一个验证码的功能,但是第一次可以生成验证码,但是点击的时候无法发起请求. 2.解决方案:在请求地址后面加一个时间戳,保证每次请求都不一样就可以了! window.on ...

  8. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  9. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

随机推荐

  1. BZOJ5332: [Sdoi2018]旧试题(莫比乌斯反演)

    时光匆匆,转眼间又是一年寒暑…… 这是小 Q 同学第二次参加省队选拔赛. 今年,小 Q 痛定思痛,不再冒险偷取试题,而是通过练习旧 试题提升个人实力.可是旧试题太多了,小 Q 没日没夜地做题,却看不到 ...

  2. 【Django】信号调度

    Django中提供了"信号调度",用于在框架执行操作时解耦. 通俗来讲,就是在某些动作发生时,信号允许特定的发送者去提醒一些接受者. * Django内置信号:** Model s ...

  3. tomcat日志配置之一自带log

    问题 tomcat每次启动时,自动在logs目录下生产以下日志文件,且每天都会生成对应日期的一个文件,造成日志文件众多: localhost.2012-07-05.txt catalina.2012- ...

  4. Hive通过查询语句向表中插入数据过程中发现的坑

    前言 近期在学习使用Hive(版本号0.13.1)的过程中,发现了一些坑,它们也许是Hive提倡的比关系数据库更加自由的体现(同一时候引来一些问题).也许是一些bug.总而言之,这些都须要使用Hive ...

  5. 6lession-基本数据类型

    因为自己是根据网上教程学习的,所以以下内容参考自 http://www.w3cschool.cc/python/python-variable-types.html python支持物种数据类型,分别 ...

  6. node----ajax请求太大报错------解决方法

    //----分析主体程序var bodyParser = require(‘body-parser‘); app.use(bodyParser.json({limit: ‘50mb‘})); app. ...

  7. Flume的Agent

    Flume的Agent text(“filename”):将文件filename作为数据源,按行发送 tail(“filename”):探测filename新产生的数据,按行发送出去 fsyslogT ...

  8. Appium_python3 抓取客户端toast

    在客户端登录或者退出登录的时候会有吐司提示,因此需要抓取来验证用户登录成功或者注销成功: 在获取toast之前需要添加   desired_caps['automationName'] = 'Uiau ...

  9. Moodle 中文 API 之 文件管理API

    File API  文件管理 文件夹 1. 概述 2. 文件域 2.1 命名文件域 3. 提供文件给用户 4. 从用户那获取文件 5. 样例 5.1 浏览文件 5.2 移动文件 5.3 文件列表 5. ...

  10. XAMPP各个版本配置

    XAMPP各个版本配置 http://code.stephenmorley.org/articles/xampp-version-history-apache-mysql-php/ XAMPP  Ap ...