原型大概是这样的

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. Kinect 开发 —— 杂一

    Kinect 提供了非托管(C++)和托管(.NET)两种开发方式的SDK,如果您用C++开发的话,需要安装Speech Runtime(V11),Kinect for Windows Runtime ...

  2. ble_app_hrs心率程序 nrf51822

    所用程序为: H:\keil\ARM\Device\Nordic\nrf51822\Board\pca10001\s110\ble_app_hrs 上面的路径是安装sdk之后生成在keil软件所在目录 ...

  3. VMwarep挂载镜像及配置本地Yum源

    1.挂载镜像: *. 通过mount命令         linux mount挂载设备(u盘,光盘,iso等 )使用说明 *.  通过VMware的控制页面手工挂载 1.1    打开Vmware软 ...

  4. centos7 docker镜像源设置

    由于docker他的镜像下载地址是国外官网源需要修改 添加 Docker 加速镜像(阿里云专属) 安装/升级你的Docker客户端 推荐安装1.10.0以上版本的Docker客户端,参考文档 dock ...

  5. Linux-swap分区

    Linux内核为了提高读写效率与速度,会将文件在内存中进行缓存,这部分内存就是Cache Memory(缓存内存).即使你的程序运行结束后, Cache Memory也不会自动释放.这就会导致你在Li ...

  6. 自己动手写SSO（单点登录）

    SSO在我们的应用中非常常见,例如我们在OA系统登录了,我们就可以直接进入采购系统,不需要再登录了,这样使我们非常方便.现在网上也有很多实现方法,于是乎我也想写一个看看.我主要用到的是cookie的机 ...

  7. LinearLayout-margin不起作用的处理

    1.如果LinearLayout中使用android:layout_marginRight不起作用,通过测试原来在android2.x中,如果一个控件中有android:layout_gravity属 ...

  8. 可变参数的实现my_sprintf

    #include "stdafx.h" #include <stdio.h> #include <stdarg.h> void my_sprintf(cha ...

  9. 3. CONFIGURATION官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 3. CONFIGURATION 3.1 Broker Configs 3.2 Pr ...

  10. Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一

    Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045-RFC2049,上面有MIME的详细规范.Base64编码可用于在HTTP环境下传递较长的标识信息.例如 ...