layui导航栏怎么实现类似苹果系统dock栏的鼠标滑动放大-Layui教程-PHP中文网

layui 本身不提供 dock 栏式导航，但可通过 css + javascript 实现 macos 风格悬停放大、居中高亮与弹性动画效果，包括基础缩放、鼠标跟随动态缩放及兼容优化方案。

layui导航栏怎么实现类似苹果系统dock栏的鼠标滑动放大

layui 本身不提供 Dock 栏式导航（悬停放大 + 底部居中弹性动画），但可以基于其导航结构，用 CSS + 少量 JavaScript 实现类似苹果 macOS Dock 的鼠标滑动放大效果：图标随鼠标靠近逐渐放大、居中高亮、有平滑过渡。

1. 基础导航结构（使用 layui.nav）

先按 layui 规范写一个横向导航栏，每个菜单项用 li 包裹图标和文字，确保可独立 hover：

<div class="layui-nav">
  <ul class="layui-nav-item-list">
<li class="dock-item">
<i class="layui-icon"></i><span>首页</span>
</li>
    <li class="dock-item">
<i class="layui-icon"></i><span>文档</span>
</li>
    <li class="dock-item">
<i class="layui-icon"></i><span>组件</span>
</li>
    <li class="dock-item">
<i class="layui-icon"></i><span>社区</span>
</li>
  </ul>
</div>

2. CSS 实现弹性放大与居中聚焦

关键点：用 transform: scale() 控制缩放，配合 transition 实现缓动；用 transform: translateX() 微调位置让放大项“浮起居中”，避免挤压相邻项。推荐以下样式：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

.layui-nav-item-list {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 60px;
  padding: 0 20px;
}
<p>.dock-item {
position: relative;
margin: 0 8px;
text-align: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
/<em> 初始缩小一点，增强放大对比 </em>/
transform: scale(0.9);
z-index: 1;
}</p><p>.dock-item:hover {
transform: scale(1.3) translateY(-5px);
z-index: 10;
}</p><p>.dock-item i {
font-size: 24px;
display: block;
margin: 0 auto 4px;
transition: inherit;
}</p><p>.dock-item span {
font-size: 12px;
display: block;
color: #666;
transition: inherit;
}</p><p>.dock-item:hover span {
color: #009688;
}</p>

3. 进阶：鼠标跟随式动态放大（可选）

若想实现更接近 macOS Dock 的“鼠标越靠近图标，放大越明显”，需监听 mousemove 并计算距离。只需给导航容器加 JS：

<script>
layui.use([], function(){
  const $nav = $('.layui-nav-item-list');
  const $items = $('.dock-item');
<p>$nav.on('mousemove', function(e){
const rect = this.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const x = e.clientX - centerX; // 相对中心的横向偏移<pre class='brush:php;toolbar:false;'>$items.each(function(i, el){
  const offset = Math.abs(x - (i - ($items.length-1)/2) * 80); // 粗略估算各图标中心横坐标
  const scale = Math.max(0.85, 1.4 - offset * 0.01);
  $(el).css({
    'transform': `scale(${scale}) translateY(${Math.max(-8, -offset * 0.05)}px)`,
    'z-index': Math.floor(10 - offset * 0.1)
  });
});</script>

});

// 移出时恢复默认 $nav.on('mouseleave', function(){ $items.css({ 'transform': 'scale(0.9)', 'z-index': 1 }); }); });

⚠️ 注意：该方案为轻量模拟，真实 Dock 使用贝塞尔曲线+物理惯性，生产环境建议用 jquery-dock 或封装成 layui 模块。