jquery實現點擊圖片切換爲另一圖片,再次點擊恢復到原圖片

在項目裏,有時候會寫這樣的開關效果,點擊開關來回切換,也就是jquery實現點擊圖片切換爲另一圖片,再次點擊恢復到原圖片。

下面是一個小的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="images/off.png"/>
        </div>       
    </body>
    <script>
        /* 實現圖片切換 */
        $(".imgclick").toggle(function() {
            $(this).attr("src", "images/off.png");
        }, function() {
            $(this).attr("src", "images/on.png");
        }).attr("src", "images/on.png");
    </script>
</html>

效果是這樣的


原文作者:祈澈姑娘 技術博客:https://www.jianshu.com/u/05f416aefbe1
90後前端妹子,愛編程,愛運營,文藝與代碼齊飛,魅力與智慧共存的程序媛一枚。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章