原型大概是这样的

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. 关于MySQL utf8mb4 字符集中字符串长度的问题

    MySQL之前推出的utf8字符集中,一个汉字占3个字节,新的utf8mb4字符集中一个汉字占4个字节. 那么我们平时建表的时候输入的varchar=16这种,到底指的是字符长度还是字节长度? 如果是 ...

  2. c# 多态的美丽(虚方法、抽象、接口实现)

    面向对象3大特性:封装.继承.多态. 面向对象2大原则: 1)里氏替换原则:子类可以给父类,父类不能赋给子类. 2)开放封闭原则: 封装变化,降低耦合.(对扩展开放,对修改封闭) ********** ...

  3. c#程序打包、机器代码生成(Ngen.exe)

    深入本机影像生成器(Ngen.exe)工具使用方法详解 先介绍一点背景知识:.Net程序在运行时会实时(JIT)编译,将.Net程序文件编译成cpu认识的汇编机器码.实时编译需要消耗额外的cpu和内存 ...

  4. 【Hello 2018 C】Party Lemonade

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 处理出凑够2^j最少需要花费多少钱. 即试着把第i种物品买2^(j-i)个,看看会不会更便宜 记录在huafei[0..31]中 然 ...

  5. PatentTips - Transparent unification of virtual machines

    BACKGROUND Virtualization technology enables a single host computer running a virtual machine monito ...

  6. 安卓使用WebView下载文件，安卓实现软件升级功能

    由于调用系统默认浏览器下载更新,造成用户体验非常不好,所以决定在webview中直接下载系统更新.然后直接安装. 由于要下载,所以必须用webview,联网权限这里不说了,直接写在manifafest ...

  7. Swift具体解释之三----------函数(你想知道的都在这里)

    函数(你想知道的都在这里) 注:本文为作者自己总结.过于基础的就不再赘述 ,都是亲自測试的结果.如有错误或者遗漏的地方.欢迎指正.一起学习. 1. 函数的简单定义和调用 简单的无參函数就不再赘述 , ...

  8. [NOIP2013]车站分级 解题报告

    妈蛋这道普及组水(神)题搞了我非常久. 一. 首先一个非常显然的事情就是每一个火车告诉了站与站之间的等级关系,所以拓扑求最长路. 可是发现暴力建边的话最坏能够达到500*500,所以时间复杂度有O(M ...

  9. div+css制作表格

    html: <div class="table"> <h2 class="table-caption">花名册:</h2> ...

  10. 使用Iperf调整网络

    使用Iperf调整网络     Iperf 是一个 TCP/IP 和 UDP/IP 的性能测量工具,通过调谐各种参数可以测试TCP的最大带宽,并报告带宽.延迟,最大段和最大传输单元大小等统计信息.Ip ...