zoukankan      html  css  js  c++  java
  • jQuery实现点击开关图片切换

    原型大概是这样的

    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>
    
    
    
  • 相关阅读:
    主席树学习记录
    P1072 Hanson 的趣味题 题解
    好文章收集
    计算几何专题
    小问题
    CSP-S2020题解
    上下界网络流
    想到的无法解决的点子
    省选联考2020组合数问题
    省选数学复习
  • 原文地址:https://www.cnblogs.com/ting6/p/9725509.html
Copyright © 2011-2022 走看看