jquery點擊改變圖片

PHPz原創: 2023-05-25 10:22:37580瀏覽

在網頁開發中，經常需要使用圖片元素來豐富頁面的內容和視覺效果。而有時候，我們需要在使用者點擊圖片時改變其展示效果，例如從一張普通圖片變成一張高亮的圖片。那麼這時，就需要使用jQuery函式庫來實現這個互動效果了。

jQuery是一款常用的JavaScript函式庫，簡化了HTML文件遍歷與操作、事件處理、動畫效果等操作。它的語法簡潔、易用，同時也有大量的插件可供選擇。下面，我們將使用jQuery來實作一個基於點擊改變圖片效果的實例。

首先，我們需要在HTML文件中插入我們要操作的圖片元素。這裡我們以一張藍色的小車作為範例。

<!DOCTYPE html>
<html>
<head>
    <title>jQueryjquery點擊改變圖片</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #car {
            width: 300px;
            height: 200px;
            background-image: url("blue-car.jpg");
            background-size: cover;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="car"></div>
</body>
</html>

其中，我們使用了CSS樣式來定義了該圖片的大小、背景圖片和遊標樣式。同時，我們將這個元素的id指定為“car”，以便之後在JavaScript中呼叫。

接下來，我們需要寫JavaScript函數來實作圖片的點擊事件。在這個事件中，我們可以使用jQuery函式庫提供的函數實作圖片元素的樣式修改。

$(function() {
    $('#car').click(function() {
        $(this).css('background-image', 'url("blue-car-highlight.jpg")');
    });
});

在這個函數中，我們首先透過jQuery的「$」符號來取得ID為「car」的圖片元素，然後為其綁定一個點擊事件的監聽函數。當使用者點擊這個車的圖片時，就會執行這個監聽函數。

在這個監聽函數中，我們透過jQuery函式庫提供的「css」函數來修改圖片元素的樣式，其中第一個參數為要修改的樣式屬性名，第二個參數為要設定的屬性值。在這個例子中，我們把背景圖像的URL修改為“blue-car-highlight.jpg”，這是一張高亮的車的圖片。

值得注意的是，由於圖片在初始狀態下是沒有高亮的效果的，因此，我們需要在這個圖片元素外面另外添加一張圖片，例如“blue-car-highlight.jpg” （那張高亮的車的圖片）作為點擊後的展示效果。

最後的效果如下圖所示。

jquery點擊改變圖片

至此，我們已經成功地實現了點擊改變圖片效果的功能。透過上述實例，我們不僅學習了jQuery函式庫的基礎語法，也了解如何使用jQuery函式庫來實作一個有互動性的Web頁面。

以上是jquery點擊改變圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery基礎選擇器怎麼用下一篇：jquery基礎選擇器怎麼用

看更多