原型大概是这样的

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. sync---强制将被改变的内容立刻写入磁盘

    sync命令用于强制被改变的内容立刻写入磁盘,更新超块信息. 在Linux/Unix系统中,在文件或数据处理过程中一般先放到内存缓冲区中,等到适当的时候再写入磁盘,以提高系统的运行效率.sync命令则 ...

  2. groupdel---删除指定的工作组

    groupdel命令 groupdel命令用于删除指定的工作组,本命令要修改的系统文件包括/ect/group和/ect/gshadow.若该群组中仍包括某些用户,则必须先删除这些用户后,方能删除群组 ...

  3. docker 部署 jenkins server

    1. 拉取一个jenkins 镜像 docker pull jenkins 2. 创建与jenkins配置目录对应的,容器外的,文件目录,并修改相应的权限 mkdir /home/jenkins ch ...

  4. SVN无法提交,路径找不到问题的解决方案

    自己有了个云服务器,只在上面搭建了几个博客网站(小雷网等). 我自己的代码,保存在SVNChina上,每年99元.(私人的付费,开源的免费) 云服务器,闲着也是闲着,决定在上面搭建一个属于自己的SVN ...

  5. wordpress+wampserver

    听说过wordpress和joomla这样的简单建站的工具,尽管是PHP,可是看过同事搭建的公司站点.效果真心不错.于是手痒痒尝试一下.由于是搭着玩儿.所以用wordpress+wampserver( ...

  6. screen-Orientation 横竖屏设置

    1.xml中设置,这个主要是在AndroidManifest.xml 中查找activity,然后在里面设置属性,如下 <application android:label="@str ...

  7. 76.CGI编码

    CGI编码 "%D6%DC%C8%F0%B8%A3"; 转换到字符串中: //CGI编码转到char类型的tmpstr中中 char* change(char *str) { // ...

  8. Day6上午解题

    预计分数:100+100+30=230 实际分数:90+25+10=125 T1少判了一种情况,T2的贪心是错的,T3被卡了... T1 模拟水题,注意20的可以用3个5块的找 #include< ...

  9. 提高IIS的FTP安全性 管理员的九阴真经

    提高IIS的FTP安全性 管理员的九阴真经 <九阴真经>是很多武林高手蒙昧以求的武林秘籍,在系统管理员这个武林中也有很多类似<九阴真经>一样的秘籍.在这里就向大家介绍一下有关提 ...

  10. BZOJ3626: [LNOI2014]LCA（树链剖分+线段树）

    Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先.有q ...