如何使用jQuery在鼠标悬停时切换网页背景视频?

逆风 技术分享评论142字数 1219阅读模式

要使用jQuery实现鼠标悬停时切换视频背景,你可以结合HTML5的 <video> 元素和jQuery来实现。以下是一个简单的示例代码:

HTML结构:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<title>鼠标悬停切换视频背景</title>
</head>
<body>
<div class="video-container">
<video id="background-video" loop muted autoplay>
<source src="video1.mp4" type="video/mp4">
</video>
<div class="overlay"></div>
</div>
<script src="script.js"></script>
</body>
</html>

 

CSS样式(styles.css):

 

body, html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}

.video-container {
position: relative;
width: 100vw;
height: 100vh;
}

#background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3); /* 可调整透明度 */
}

 

JavaScript代码(script.js):

 

$(document).ready(function () {
// 初始视频源
var currentVideo = "video1.mp4";

// 鼠标悬停时切换视频
$(".video-container").hover(
function () {
$("#background-video").attr("src", "video2.mp4"); // 切换为第二个视频
},
function () {
$("#background-video").attr("src", currentVideo); // 恢复为初始视频
}
);
});

 

确保将实际的视频文件路径替换为你的视频文件路径。此示例中,鼠标悬停时视频背景切换,离开时切回初始视频。你可以根据需要添加更多的视频源或调整动画效果。

转载请保留原文链接
逆风
  • 本文由 发表于 2024年1月15日 14:41:06
  • 转载请务必保留本文链接:https://blog.smallxu.com/post/721/
评论  0  访客  0
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: