<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="icon" href="img/brower.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>ヾ(≧O≦)〃嗷~爱萝莉</title>
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location ="https://www.baidu.com"; //可以换成http地址
}
</script>
<!--引入第三方css样式-->
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/Buttons/2.0.0/css/buttons.css" rel="stylesheet">
<!--jquery-->
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<style>
body{
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 100%;
}
.covervid-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(img/mv_bg.jpg) no-repeat center center;
background-size: cover;
}
.covervid-wrapper video{
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%, -50%); /***垂直居中***/
height: auto;
width: 100%;
}
.mask{
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
opacity:0.3;
-moz-opacity:0.3;
filter:alpha(opacity=30);
background-color: #000;
z-index: 10;
}
#main {
position: absolute;
width: 400px;
text-align: center;
z-index: 1000;
left:-999px;
}
#main h1{
font-size: 40px;
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 5px #f7f7f7;
}
#main .button{
width: 240px;
margin-top: 20px;
cursor: pointer;
font-size: 19px;
color: deepskyblue;
font-family: "微软雅黑";
}
#main p{
margin-top: 80px;
font-size: 18px;
letter-spacing: 2px;
color: #FFFFFF;
font-weight: normal;
font-family: arial;
}
#main a:hover{
cursor: pointer;
color: #FFFFFF;
font-size: 21px;
}
/**** #nav ****/
.nav{
position: absolute;
width: 100%;
height: 120px;
z-index: 1000;
}
.nav .nav_logo{
display: block;
float: left;
margin-left: 60px;
width: 300px;
height: 120px;
text-indent: -999em;
background: url(img/aluolilogo.png) center top no-repeat;
}
.nav .button-group{
float: right;
margin: 20px;
font-family: "微软雅黑";
font-size: 22px;
}
</style>
<script>
window.onload = function(){
function box(){
//获取DIV为‘box’的盒子
var oBox = document.getElementById('main');
//获取元素自身的宽度
var L1 = oBox.offsetWidth;
//获取元素自身的高度
var H1 = oBox.offsetHeight;
//获取实际页面的left值。（页面宽度减去元素自身宽度/2）
var Left = (document.documentElement.clientWidth-L1)/2;
//获取实际页面的top值。（页面宽度减去元素自身高度/2）
var top = (document.documentElement.clientHeight-H1)/2;
oBox.style.left = Left+'px';
oBox.style.top = top+'px';
}
box();
//当浏览器页面发生改变时，DIV随着页面的改变居中。
window.onresize = function(){
box();
}
}
</script>
<body onselectstart="return false;" oncontextmenu="return false;">
<script>
//禁用网页右键
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
</script>
<div class="covervid-wrapper" >
<!--#mvbg-->
<div class="mask" id="mask"></div>
<!--[if lt IE 9]>
<script>
var mask = document.getElementById("mask");
mask.className="";
</script>
<![endif]-->
<video class="covervid-video" autoplay="" loop="" >
<source src="http://ftp6075396.host579.zhujiwu.me/video/name.mp4" type="video/mp4">
</video>
<!--#container-->
<!--#nav-->
<div class="nav">
<!--<a class="nav_logo" href="##">爱萝莉博客</a>-->
<div class="button-group" >
<button type="button" style="color: #FFFFFF;" class="button button-glow button-border button-rounded button-primary button-royal">博客首页</button>
<button type="button" style="color: #FFFFFF;" class="button button-glow button-border button-rounded button-primary">我的简历</button>
<button type="button" style="color: #FFFFFF;" class="button button-glow button-border button-rounded button-primary">网站收藏</button>
</div>
</div>
<!--#nav end-->
<div class="luoli">
<div id="main">
<h1>BLOG-ALUOLI-TOP</h1>
<a href="##" class="button button-glow button-border button-rounded button-primary">爱萝莉首页</a>
<p>copyright 2016-2017 Hearbeats</p>
</div>
</div>
<!--#container end-->
</div>
</div>
<!--引入第三方插件-->
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/Buttons/2.0.0/js/buttons.js"></script>
<script type="text/javascript" src="js/covervid.js" ></script><!--全屏背景视频插件-->
<script>
$('.covervid-video').coverVid(1920, 1080);//调用全屏背景视频插件
</script>
</body>
</html>
全屏mv背景欢迎页源码
需积分: 24 33 浏览量
2017-09-02
10:29:42
上传
评论
收藏 17.49MB ZIP 举报
MV.zip （16个子文件） 
1111 引导页面 guide_page css 
guide.css 0B mv.css 2KB
bgtest.html 374B img 
aluolilogo.png 34KB brower.ico 17KB
mv_bg.jpg 859KB luoli.png 123KB index.html 6KB js covervid.js 2KB
name.mp4 16.7MB ribbon.js 2KB ribbon.min.js 1KB new_file.js 2KB .project 1KB re.html 2KB .project 380B资源评论
