原型大概是这样的

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. groups---输出指定用户所在组的组成员，

    groups命令   groups命令在标准输入输出上输出指定用户所在组的组成员,每个用户属于/etc/passwd中指定的一个组和在/etc/group中指定的其他组. 语法 groups(选项)( ...

  2. 【Codeforces Round #426 (Div. 2) A】The Useless Toy

    [Link]:http://codeforces.com/contest/834/problem/A [Description] [Solution] 开个大小为4的常量字符数组; +n然后余4,-n ...

  3. XML学习总结（2）——XML简单介绍

    一.XML概念 Extensible Markup Language,翻译过来为可扩展标记语言.Xml技术是w3c组织发布的,目前推荐遵循的是W3C组织于2000发布的XML1.0规范. 二.学习XM ...

  4. wordpress 加速主题的静态资源

    wordpress 加速主题的静态资源(固定的CSS.JS和图片等) wordpress 中用函数 get_stylesheet_directory_uri() 生成当前主题的 URL , 格式如 h ...

  5. [NOI.AC#35]string 缩点+拓扑排序

    链接 因为有交换相邻字母,因此给你字符串就相当于给你了这个字符串的所有排列 把等价的串映射到整数范围,再根据 \(m\) 种魔法连边,缩点后在 DAG 上DP即可 无耻地用了int128 #inclu ...

  6. Catch Me If You ... Can't Do Otherwise--转载

    原文地址:https://dzone.com/articles/catch-me-if-you-cant-do-otherwise I don't know whether it's an anti- ...

  7. 备库报 ORA-00313、ORA-00312、ORA-27037

    备库alert日志如下:Errors in file /data/app/oracle/diag/rdbms/standby/orcl/trace/orcl_m000_31006.trc:ORA-00 ...

  8. JavaScript tab页

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. BZOJ2565: 最长双回文串（Manacher）

    Description 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为“abc”,逆序为“cba”,不相同).输入长度为n的串S,求S的最长双回文子串T, ...

  10. 趣闻｜Python之禅（The Zen of Python）

    在Python解释器中输入“import this”会发生什么?如果你不知道这个彩蛋,推荐继续阅读这篇文章. 2001年秋,Foretec(一家会议组织公司)正在准备召开第十届Internationa ...