jquery 漂浮图片

基础概念

jQuery 漂浮图片（Floating Image）是指使用 jQuery 库来实现一个图片在网页上浮动的效果。这种效果通常用于网站的页脚、侧边栏或广告位，以吸引用户的注意力。

类型

固定位置漂浮：图片固定在页面的某个位置，不会随着页面滚动而移动。
跟随鼠标漂浮：图片会跟随鼠标移动。
随机漂浮：图片会在页面上随机移动。

应用场景

广告位：用于展示广告，吸引用户点击。
页脚信息：在页脚显示一些重要信息，如联系方式、版权声明等。
侧边栏导航：在侧边栏显示导航链接或图标。

示例代码

以下是一个简单的 jQuery 漂浮图片的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Floating Image</title>
    <style>
        #floating-image {
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 999;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="floating-image" src="path/to/your/image.jpg" alt="Floating Image">

    <script>
        $(document).ready(function() {
            var xPos = 0;
            var yPos = 0;
            var xSpeed = 2;
            var ySpeed = 1;

            function floatImage() {
                xPos = xPos + xSpeed;
                yPos = yPos + ySpeed;

                if (xPos > $(window).width() - $("#floating-image").width() || xPos < 0) {
                    xSpeed = -xSpeed;
                }

                if (yPos > $(window).height() - $("#floating-image").height() || yPos < 0) {
                    ySpeed = -ySpeed;
                }

                $("#floating-image").css({
                    left: xPos,
                    top: yPos
                });

                window.setTimeout(floatImage, 20);
            }

            floatImage();
        });
    </script>
</body>
</html>