🔍 浮动搜索插件

现代化、响应式的浮动搜索解决方案，提升网站用户体验

✨ 智能交互 📱 完全响应式 🎨 高度可定制 ⚡ 轻量高效

🎯 插件演示区域

向下滚动查看右下角的浮动搜索插件效果

体验智能导航按钮和位置切换功能

核心特性

🎯

智能位置切换

支持左右位置自定义，点击悬停箭头即可切换位置。右侧显示向左箭头，左侧显示向右箭头，操作直观便捷。

🔍

优雅搜索体验

搜索框平滑展开动画，左侧位置自动调整内边距确保文字完整显示。支持回车键快速提交搜索。

📱

完全响应式设计

自动适配各种屏幕尺寸，在移动设备上智能调整按钮大小和间距，确保最佳用户体验。

⚡

智能导航按钮

根据页面滚动位置智能显示导航按钮，使用平滑的透明度变化避免闪烁，提升交互体验。

🎨

高度可定制

提供完整的配置选项，支持颜色、尺寸、位置等全方位自定义，轻松匹配网站设计风格。

💾

用户偏好记忆

自动保存用户的位置设置，下次访问时保持用户选择，提供一致的使用体验。

使用指南

1

基础交互

插件默认显示在页面右下角。点击搜索按钮展开搜索框，输入关键词后点击搜索或按回车键提交。

// 点击搜索按钮展开搜索框
// 输入关键词后提交搜索
2

位置切换

将鼠标悬停在搜索按钮上显示方向箭头。点击箭头即可在左右位置间切换，无需刷新页面。

// 悬停显示方向箭头
// 点击箭头切换位置
3

智能导航

页面可滚动时显示上下导航按钮。平滑滚动到页面顶部或底部，按钮状态智能变化无闪烁。

// 滚动时显示导航按钮
// 点击平滑滚动到对应位置
4

响应式适配

在不同设备上自动调整布局。移动端优化按钮尺寸和搜索框宽度，确保操作便捷。

// 自动适配移动端
// 优化触控体验

快速集成

只需简单几步即可将插件集成到您的网站：

<!-- 1. 在页面尾部添加插件容器 -->
<div id="floating-search-plugin"></div>

<!-- 2. 复制插件代码 -->
<script>
  const CONFIG = {
    position: 'right',        // 默认位置
    searchAction: '/search.php'  // 搜索提交地址
  };
  // ... 插件代码 ...
</script>

<!-- 3. 自定义配置（可选） -->
// 修改颜色、尺寸、位置等参数
// 匹配您的网站设计风格
💡 提示： 插件会自动处理所有交互逻辑，无需额外配置。用户的位置选择会自动保存。