一个非常酷的全屏导航，当鼠标悬停在菜单项上时，可以在背景图像之间动态切换。

使用简单的HTML/CSS和一点JavaScript（jQuery）构建。

如何使用它:

1.创建导航列表，并使用数据图像属性：

<ul class="navi">
  <li data-image="1.jpg">
    <a href="#" data-text="JQUERY">JQUERY</a>
  </li>
  <li data-image="2.jpg">
    <a href="#" data-text="SCRIPT">SCRIPT</a>
  </li>
  <li data-image="3.jpg">
    <a href="#" data-text="NET">NET</a>
  </li>
</ul>

2.创建一个空容器来容纳背景图像。

<div class="photo"></div>

3.导航所需的CSS样式。

.navi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 100;
}
 
.navi li a {
  font-size: 4em;
  color: #fff;
  position: relative;
}
 
.navi li a:before {
  position: absolute;
  color: yellowgreen;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  content: attr(data-text);
  transition: 0.6s;
}
 
.navi li a:hover:before {
  width: 100%;
}

4.将CSS样式应用于背景图像。

.photo {
  background-color: #ddd;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(initial.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition: 0.5s;
}

5.将鼠标悬停在菜单项上时切换背景图像的主JavaScript（jQuery脚本）。

$('.navi li').mouseenter(function () {
  var changeImage = $(this).attr('data-image')
  $('.photo').css({
    'background-image': 'url(' + changeImage + ')'
  })
})
$('.navi li').mouseleave(function () {
  $('.photo').css({
    'background-image': ''
  })
})

预览截图

带背景图像切换 全屏导航