<!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>
html,
body {
margin: 0px;
width: 100%;
position: relative;
overflow-x: hidden;
}
.background {
width: 100%;
height: 185px;
z-index: 2;
}
.video {
z-index: 1;
height: auto;
position: absolute;
}
video {
margin-left: -90px;
}
</style>
<script>
window.onload = function() {
var ovideo = document.getElementsByTagName("video")[0]; //获取视频赋值给变量
var oback = document.getElementsByClassName("background")[0]; //获取背景赋值给变量
oback.onmousemove = function(E) { //鼠标移动获取X轴的方法
var xmove = E.screenX;
getmouseX(xmove);
}
//根据X轴移动背景视频
function getmouseX(Xmove) { //Xmove为传的xmove的值
//设置一个变量
var i = 0;
//中间值
var md = document.body.clientWidth / 2; //获取网页宽度除以2
// console.log(md);
//根据中间值判断距离
if (Xmove > md) { //大于中间值,则鼠标在右半区移动
var cha = Xmove - md; //cha越大代表需要移动的距离越大
var bili = cha / md; //转化比例
i = 90 * bili; //移动的距离
console.log(Xmove);
ovideo.style.transform = "translateX(" + -i + "px)";
// console.log(ddd);
} else if (Xmove < md) { //小于中间值,则鼠标在左半区移动
var cha = md - Xmove; //cha越大代表需要移动的距离越大
var bili = cha / md; //转化比例
i = 90 * bili; //移动的距离
console.log(Xmove);
ovideo.style.transform = "translateX(" + i + "px)";
// console.log(ddd);
} else {
return;
}
}
}
</script>
</head>
<body>
<!-- 大框架 -->
<div class="background">
<!-- 视频框架 -->
<div class="video">
<video src="../img/e71914a7-e5df-43f0-aab0-cbf3ef3b35f5.mp4" autoplay="autoplay" loop muted="muted"></video>
</div>
</div>
</body>
</html>
中途发现b站扒下来的视频加上“autoplay”没法自动播放,之后发现可以通过加上muted="muted"静音播放属性,便可以实现自动播放。
获取网页宽度时,通过上网查询得知可通过这条语句实现“document.body.clientWidth ”