jquery圆形气泡导航特效

基础概念

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>jQuery 圆形气泡导航特效</title>
    <style>
        .nav-item {
            display: inline-block;
            margin: 10px;
            cursor: pointer;
        }
        .bubble {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ffcc00;
            display: none;
            animation: bubble 1s ease-in-out;
        }
        @keyframes bubble {
            from { transform: scale(0); }
            to { transform: scale(1); }
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="nav">
        <div class="nav-item" data-bubble="bubble1">Item 1</div>
        <div class="nav-item" data-bubble="bubble2">Item 2</div>
        <div class="nav-item" data-bubble="bubble3">Item 3</div>
    </div>
    <div class="bubble" id="bubble1"></div>
    <div class="bubble" id="bubble2"></div>
    <div class="bubble" id="bubble3"></div>

    <script>
        $(document).ready(function() {
            $('.nav-item').hover(function() {
                var bubbleId = $(this).data('bubble');
                $('#' + bubbleId).show().css({
                    top: $(this).offset().top + $(this).outerHeight(),
                    left: $(this).offset().left + $(this).outerWidth() / 2 - $('#' + bubbleId).outerWidth() / 2
                });
            }, function() {
                $('.bubble').hide();
            });
        });
    </script>
</body>
</html>