在悬停时播放 Gif 或视频 Jquery - Javascript

在 web 开发中，对于一些需要动态展示的内容，我们通常会使用 Gif 图片或者视频来丰富用户体验。本文将介绍如何使用 jQuery 和 Javascript 在悬停时播放 Gif 或视频。

播放 Gif

方式一：利用 CSS 实现

我们可以利用 CSS 来实现鼠标悬停时播放 Gif 的效果。具体实现步骤如下：

1. 创建一个带有 Gif 图片的 div 元素
2. 利用 CSS 将 Gif 图片的动画暂停
3. 给 div 元素绑定 mouseover 和 mouseout 事件
4. mouseover 事件触发时，利用 jQuery 修改 CSS，将 Gif 图片的动画开启
5. mouseout 事件触发时，利用 jQuery 修改 CSS，将 Gif 图片的动画暂停

<div class="gif-box"></div>

<style>
.gif-box {
  width: 200px;
  height: 200px;
  background-image: url("example.gif");
  background-size: cover;
  background-repeat: no-repeat;
  animation-play-state: paused; // 暂停 Gif 动画
}

.gif-box:hover {
  animation-play-state: running; // 开启 Gif 动画
}
</style>

<script>
$(document).ready(function() {
  $(".gif-box").on({
    mouseover: function() {
      $(this).css({"animation-play-state": "running"});
    },
    mouseout: function() {
      $(this).css({"animation-play-state": "paused"});
    }
  });
});
</script>

方式二：利用 jQuery 插件实现

我们也可以利用 jQuery 插件 hover3d.js 来实现 Gif 图片的悬停效果，该插件支持悬停时播放 Gif 图片，并且支持自定义设置。

使用步骤如下：

1. 引入 hover3d.js 文件
2. 创建一个带有 Gif 图片的 div 元素
3. 给 div 元素添加 class 名称
4. 创建一个新的 hover3d 实例，并传入 Gif 图片所在的 class 名称

<div class="gif-img"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/arunkumarpalaniappan/hover3d/master/js/jquery.hover3d.js"></script>

<script>
$(document).ready(function() {
  $(".gif-img").hover3d({
    selector: ".gif-img",
    perspective: 1000,
    invert: true,
    shine: true,
    hoverInClass: "gif-hover--in",
    hoverOutClass: "gif-hover--out",
  });
});
</script>

播放视频

方式一：利用 HTML5 实现

我们可以在页面中直接引入视频，然后在鼠标悬停时播放。具体实现步骤如下：

1. 创建视频元素
2. 设置视频元素的宽度、高度、是否自动播放等属性
3. 给视频元素绑定 mouseover 和 mouseout 事件
4. mouseover 事件触发时，利用 JavaScript 调用 .play() 方法，播放视频
5. mouseout 事件触发时，利用 JavaScript 调用 .pause() 方法，暂停视频

<video id="example-video" width="400" height="220" autoplay>
  <source src="example.mp4" type="video/mp4">
</video>

<script>
$(document).ready(function() {
  var video = document.getElementById("example-video");
  $("#example-video").on({
    mouseover: function() {
      video.play();
    },
    mouseout: function() {
      video.pause();
    }
  });
});
</script>

方式二：利用 jQuery 插件实现

我们也可以利用 jQuery 插件 jquery.videoBG 来实现播放视频的悬停效果，该插件支持悬停时播放视频，并且支持自定义设置。

使用步骤如下：

1. 引入 jquery-1.8.2.min.js 和 jquery.videoBG.js 文件
2. 创建一个容器元素
3. 给容器元素添加 class 名称
4. 利用 JavaScript 调用 videoBG 方法，并传入视频链接和参数

<div class="video-box"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pupunzi/jquery.mb.YTPlayer/master/dist/jquery.mb.YTPlayer.min.js"></script>

<script>
$(document).ready(function() {
  $(".video-box").videoBG({
    mp4: "example.mp4",
    ogv: "example.ogv",
    webm: "example.webm",
    poster: "example.jpg",
    scale: "fit",
    zIndex: "0",
  });
});
</script>

以上就是利用 jQuery 和 JavaScript 在悬停时播放 Gif 或视频的方法，开发者可以根据自己的实际需求选择适合自己的方式。