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>
相关文章
|
5月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
50 0
|
5月前
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
64 0
jQuery点击图片来回切换功能
|
5月前
|
JavaScript 数据库
jQuery点击图片开启,再次点击图片关闭效果
jQuery点击图片开启,再次点击图片关闭效果
19 0
|
5月前
|
JavaScript
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
58 0
|
5月前
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
32 0
|
5月前
|
JavaScript
jQuery点击按钮,生成input输入框
jQuery点击按钮,生成input输入框
31 0
|
5月前
|
JavaScript Java
jQuery点击checkbox选择标签到指定的位置
jQuery点击checkbox选择标签到指定的位置
28 0
|
5月前
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
31 0
|
5月前
|
移动开发 JavaScript 前端开发
jQuery实现多种切换效果的图片切换的五款插件
jQuery实现多种切换效果的图片切换的五款插件
40 0
|
6月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
36 0