jquery點擊改變圖片

PHPz
發布: 2023-05-25 10:22:37
原創
542 人瀏覽過

在網頁開發中,經常需要使用圖片元素來豐富頁面的內容和視覺效果。而有時候,我們需要在使用者點擊圖片時改變其展示效果,例如從一張普通圖片變成一張高亮的圖片。那麼這時,就需要使用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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板