小麦子 发表于 2024-12-5 10:50:03

jQuery鼠标悬停切换视频背景





<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标悬浮渐变切换视频背景</title>
<style>
    .video-box {
      width: 800px;
      height: 448px;
      margin: 0 auto;
      position: relative;
      display: flex;
      overflow: hidden;
    }

    .video-box>div {
      width: 266px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* background-color: rgba(0, 0, 0, .3); */
      color: #fff;
      border: 1px solid #ededed;
      border-right: 0;
    }

    .video-box video {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      z-index: -1;
    }

    .video-box .item:not(:first-child) video {
      opacity: 0;
    }

    .video-box .active {
      animation: show_ 0.7s linear 1 forwards;
    }

    .video-box .next {
      animation: hidden_ 0.7s linear 1 forwards;
    }



    @keyframes show_ {
      0% {
      opacity: 0;
      }

      100% {
      opacity: 1;
      }
    }

    @keyframes hidden_ {
      0% {
      opacity: 1;
      }

      100% {
      opacity: 0;
      }
    }
</style>
</head>

<body>
<div class="video-box">
    <div class="item">
      <span>1</span>
      <video id="videos0" autoplay muted loop>
      <source src="https://nie.v.netease.com/r/video/20220121/fc6becb0-b3be-4937-8dcf-aa950a1a01f1.mp4" type="video/mp4">
      </video>
    </div>
    <div class="item">
      <span>2</span>
      <video id="videos1" autoplay muted loop>
      <source src="https://mc.v.netease.com/r/video/20210204/d01bbccd-dd92-4a15-a178-b3e93a725dcc.mp4" type="video/mp4">
      </video>
    </div>
    <div class="item">
      <span>3</span>
      <video id="videos2" autoplay muted loop>
      <source src="https://yys.v.netease.com/qita/CGkaichang.mp4" type="video/mp4">
      </video>
    </div>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    var box = $(".video-box")
    var nextItem = 0
    box.delegate(".item", "mouseover", function (e) {
      e.stopPropagation()
      $(this).find("span").css("transform", "scale(5)")
      if (nextItem != $(this).index()) {
      $(".video-box .item").find("video").removeClass("next")
      $(".video-box .item").find("video").removeClass("active")
      $(".video-box .item").eq(nextItem).find("video").addClass("next")
      $(this).find("video").addClass("active")
      nextItem = $(this).index()
      }
      $("#video" + $(this).index()).load()
    })
    $(".video-box .item").on("mouseleave", function () {
      $(this).find("span").css("transform", "scale(1)")
    })
    $(".video-box").on("mouseleave", function () {
      $(".video-box .item").find("video").removeClass("next")
      $(".video-box .item").find("video").removeClass("active")
      if (nextItem != 0) {
      $(".video-box .item").eq(nextItem).find("video").addClass("next")
      $(".video-box .item").eq(0).find("video").addClass("active")
      nextItem = 0
      } else {
      $(".video-box .item").eq(0).find("video").css("opacity", "1")
      }
    })
</script>

</body>

</html>

mm6688 发表于 2024-12-21 23:06:36

好好学习天天向上

1633328963 发表于 2024-12-24 06:12:12

这个板子不错谢谢分享，支持牛牛论坛
页: [1]
查看完整版本: jQuery鼠标悬停切换视频背景