jQuery实现点击开关图片切换

简介: jQuery实现点击开关图片切换

原型大概是这样的

需求:点击右侧的蓝色眼睛,会变成

关键代码:

/* 实现图片切换 */
$(".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>
相关文章
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
91 0
|
4月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
27 1
|
4月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
22 1
|
7月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
104 0
jQuery点击图片来回切换功能
|
JavaScript 数据库
jQuery点击图片开启,再次点击图片关闭效果
jQuery点击图片开启,再次点击图片关闭效果
53 0
|
JavaScript
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
148 0
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
63 0
|
JavaScript
jQuery点击按钮,生成input输入框
jQuery点击按钮,生成input输入框
64 0
|
JavaScript Java
jQuery点击checkbox选择标签到指定的位置
jQuery点击checkbox选择标签到指定的位置
55 0