jquery鼠标点击变化网页背景图片

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，可以轻松地实现网页上的各种动态效果。

类型

jQuery 的事件处理包括鼠标点击事件、键盘事件、表单事件等。鼠标点击事件是最常用的事件之一。

应用场景

鼠标点击变化网页背景图片是一个常见的网页交互效果，适用于各种网站，如个人博客、图片展示网站等。

示例代码

以下是一个使用 jQuery 实现鼠标点击变化网页背景图片的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Background Image on Click</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            transition: background-image 1s ease-in-out;
        }
    </style>
</head>
<body>
    <button id="changeBg">Change Background</button>

    <script>
        $(document).ready(function() {
            var images = [
                'https://example.com/image1.jpg',
                'https://example.com/image2.jpg',
                'https://example.com/image3.jpg'
            ];
            var currentIndex = 0;

            $('#changeBg').click(function() {
                currentIndex = (currentIndex + 1) % images.length;
                $('body').css('background-image', 'url(' + images[currentIndex] + ')');
            });
        });
    </script>
</body>
</html>