HTML5实现的震撼3D焦点图动画的示例代码

下面是关于“HTML5实现的震撼3D焦点图动画”的完整攻略，主要分为以下三个部分：

一、准备工作

1.1 导入必要的CSS和JS文件

HTML5实现的震撼3D焦点图动画需要使用一些CSS和JS文件，这些文件需要事先导入到HTML页面中。

其中必要的CSS文件有：

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">

必要的JS文件有：

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/main.js"></script>

1.2 编写HTML结构

为了支持HTML5实现的震撼3D焦点图动画，需要在HTML页面中编写一些相关结构。

整个焦点图动画区域以一组div标签为容器，每个div标签内部包含一张图片和一些文字说明，例如：

<div id="main">
  <div class="slide">
    <a href="#"><img src="img/1.jpg"></a>
    <p>图片1说明文字</p>
  </div>
  <div class="slide">
    <a href="#"><img src="img/2.jpg"></a>
    <p>图片2说明文字</p>
  </div>
  <div class="slide">
    <a href="#"><img src="img/3.jpg"></a>
    <p>图片3说明文字</p>
  </div>
</div>

二、实现过程

2.1 JS实现焦点图动画

在准备工作部分中导入的main.js文件中，主要实现了焦点图动画的JS代码。

其中，主要的函数有：

• var i -> 用于标记当前焦点图的位置
• var n -> 用于标记焦点图的数量
• var duration -> 定义过渡动画的时间
• var interval -> 定义自动轮播的时间间隔

var i = 0,
    n = $('div.slide').length,
    duration = 500,
    interval = 5000;

在主函数main()中，实现了自动播放和手动切换焦点图的功能。

自动播放：每隔一段时间就切换一个焦点图。

function autoSlide() {
  setInterval(function() {
    i++;
    showSlide();
  }, interval);
}

手动切换焦点图：当用户点击左/右导航时，切换到相邻的焦点图。

function manualSlide() {
  $('#prev').on('click', function() {
    i--;
    showSlide();
  });
  $('#next').on('click', function() {
    i++;
    showSlide();
  });
}

实现showSlide()函数：用于更新焦点图位置和样式，并根据位置改变背景色和文字说明。

function showSlide() {
  if (i < 0) {
    i = n - 1;
  }
  if (i > n - 1) {
    i = 0;
  }
  $('div.slide').hide().eq(i).fadeIn(duration);
  $('#main').css('background', $('div.slide').eq(i).attr('data-color'));
  $('.info').text($('div.slide').eq(i).find('p').text());
}

2.2 CSS实现3D动画效果

在准备工作部分中导入的main.css文件中，定义了焦点图和文字说明的样式，并实现了3D动画效果。

其中主要的样式属性有：

• -webkit-transform-style -> 设置变换模式为3D
• -webkit-perspective -> 定义近景和远景的距离
• -webkit-transform -> 定义3D变换
• -webkit-transition -> 定义动画过渡属性

其中，通过设置每个焦点图的data-color属性，实现了每个焦点图在切换时的背景色变化。

#main {
  margin: 60px auto 0;
  width: 60%;
  height: 400px;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 800px;
}
div.slide {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: center center -300px;
  -webkit-transform: rotateY(0deg) translateZ(0);
  -webkit-transition: opacity 0.5s, transform 0.5s;
}
div.slide:first-child {
  display: block;
}
div.slide[data-color="#FF5252"] {
  background-color: #FF5252;
}
div.slide[data-color="#FFD740"] {
  background-color: #FFD740;
}
div.slide[data-color="#8BC34A"] {
  background-color: #8BC34A;
}
div.slide[data-color="#26C6DA"] {
  background-color: #26C6DA;
}
div.slide[data-color="#7E57C2"] {
  background-color: #7E57C2;
}

三、示例说明

3.1 示例1：添加3D旋转鼠标悬停动画效果

在原有的HTML5实现的震撼3D焦点图动画基础上，我们可以通过添加鼠标悬停事件，实现3D旋转效果。

具体实现：在main.js文件中，新增函数rotateSlide()，在manualSlide()函数中绑定鼠标悬停事件，实现3D旋转效果。

function rotateSlide() {
  $('#main').on('mousemove', function(event) {
    var mouseX = event.clientX - ($(this).offset().left + $(this).width() / 2),
        mouseY = event.clientY - ($(this).offset().top + $(this).height() / 2),
        rotateY = 10 * mouseX / $(this).width(),
        rotateX = -10 * mouseY / $(this).height();
    $('div.slide').css('opacity',0.5);
    $('div.slide').eq(i).css({
      'opacity': 1,
      'transform': 'rotateY(' + rotateY + 'deg) rotateX(' + rotateX + 'deg) translateZ(100px)'
    });
  });
  $('#main').on('mouseleave', function(event) {
    $('div.slide').css({
      'opacity': 1,
      'transform': 'rotateY(0deg) translateZ(0)'
    });
  });
}

3.2 示例2：添加导航点控制焦点图切换

在原有的HTML5实现的震撼3D焦点图动画基础上，我们可以通过添加导航点控制焦点图切换。

具体实现：在HTML结构中新增一个div标签作为导航点容器，在main.js文件中新增函数createBullet()，实现导航点的创建，并通过导航点绑定点击事件，实现焦点图的切换。

function createBullet() {
  var html ="";
  for(var j=0;j<n;j++){
    if(j==0){
      html+= "<span class='active'></span>";
    }else{
      html+= "<span></span>";
    }
  }
  $(".nav").html(html);
  $(".nav span").on('click',function(){
    i=$(this).index();
    showSlide();
    $(this).addClass('active').siblings().removeClass('active');
  });
}

同时，需要在main.css文件中新增导航点的样式。

.nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 0;
}
.nav span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 5px;
  cursor: pointer;
  font-size: 0;
  transition: background 0.3s;
}
.nav span.active {
  background: #fff;
}