#jquery篇实现全屏滚动效果(没有通过jquery插件形式封装)
项目搭建
- p2p项目
- assets
- images文件夹
- index文件夹
- css文件夹
- images文件夹
- js文件夹
- video文件夹
- login文件夹
- regist
- common.css
- common.js
- favicon.ico
- index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>p2p项目</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="keywords" content="P2P">
<meta name="description" content="p2p">
<link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon">
<link rel="BOOKMARK" href="favicon1.ico">
<link rel="FAVICON" href="favicon1.ico">
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/common.css">
<link rel="stylesheet" href="assets/index/css/index.css">
</head>
<body>
<!--头部开始部分-->
<header class='animate-bezier'>
<nav class="menubar white">
<div class="container">
<a href="#" class="brand">
<img class="normal" src="assets/images/favicon2.jpg" alt="" width="60" height="60">
<img class="black" src="assets/images/favicon2.jpg" alt="" width="41" height="40">
</a>
<ul class="menus">
<li><a href="#">优先认购</a></li>
<li><a href="#">我要投资</a></li>
<li><a href="#">我要转让</a></li>
<li><a href="#">我要供票</a></li>
<li><a href="#">我的云桥</a></li>
<li><a href="#">帮助中心</a></li>
</ul>
<div class="oper">
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
</nav>
</header>
<!--头部结束部分-->
<!--主体部分开始-->
<!--<main>-->
<ul class="section-wrap animate-bezier">
<li class="section section-1">
<video width="100%" autoplay="autoplay" loop="loop" src="assets/index/video/movie01.mp4">
<!--添加视频为了兼容ie6,7,8-->
<!--<object id="flash" width="100%" data-player-playerbody="flash" type="video/mp4" data="/video/banner.mp4">-->
<!--<param name="quality" value="high">-->
<!--<param name="wMode" value="window">-->
<!--<param name="bgcolor" value="#000000">-->
<!--<param name="scale" value="exactfit">-->
<!--<param name="loop" value="true">-->
<!--<param name="play" value="true">-->
<!--<param name="DeviceFont" value="true">-->
<!--<param name="allowFullScreen" value="true">-->
<!--<param name="menu" value="false">-->
<!--<embed src="assets/index/video/banner.mp4" quality="high" bgcolor="#000000" width="100%" loop="true" type="video/mp4" pluginspage="http://www.macromedia.com/go/getflashplayer">-->
<!--</object>-->
</video>
<!--为了挡住视频-->
<div class="layer">
</div>
</li>
<li class="section section-2">
<img class="qx animate-bezier" src="assets/index/images/quxian.png">
<img class="tb animate-bezier" src="assets/index/images/table.png">
</li>
<li class="section section-3">
</li>
<li class="section section-4">
</li>
<li class="section section-5">
</li>
</ul>
<!--</main>-->
<!--主体部分结束-->
<script src="assets/plug-in/jquery/jquery-2.2.4.js"></script>
<script src="assets/common.js"></script>
<script src="assets/index/js/index.js"></script>
</body>
</html>
commom.css
@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
margin: 0;
padding: 0;
}
fieldset, img, input, button {
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
ul, ol {
list-style: none;
}
input {
padding-top: 0;
padding-bottom: 0;
font-family: "SimSun", "宋体";
}
select, input {
vertical-align: middle;
}
select, input, textarea {
font-size: 12px;
margin: 0;
}
textarea {
resize: none;
}
/*防止拖动*/
img {
border: 0;
vertical-align: middle;
}
/* 去掉图片低测默认的3像素空白缝隙*/
table {
border-collapse: collapse;
}
html,body {
width: 100%;
height: 100%;
font-family: Arial,"Microsoft Yahei";
font-size: 14px;
background: #bbb;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
/*将对象作为块元素级的表格显示*/
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/
}
a {
color: #666;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
text-decoration: none;
font-weight: normal;
font-size: 100%;
}
s, i, em {
font-style: normal;
text-decoration: none;
}
.container{
width: 1200px;
margin: auto;
}
.animate-bezier{
transition: all 1s cubic-bezier(0.86, 0, 0.03, 1);
-moz-transition: all 1s cubic-bezier(0.86, 0, 0.03, 1);
-webkit-transition: all 1s cubic-bezier(0.86, 0, 0.03, 1);
-o-transition: all 1s cubic-bezier(0.86, 0, 0.03, 1);
}
index文件夹下的index.css
/*头部开始*/
header{
width: 100%;
position: fixed;
top: 0;
z-index: 999;
}
header.hide{
transform: translateY(-100%);
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-o-transform: translateY(-100%);
}
header .menubar{
height: 100%;
}
header .menubar .container{
height: 100%;
}
header .menubar .brand{
float: left;
/*margin:0 200px;*/
/*display: block;*/
}
header .menubar .menus{
float: left;
height: 100%;
/*background-color: red;*/
}
header .menubar .menus li{
float: left;
}
header .menubar .menus li a{
padding: 0 23px;
display: block;
line-height: 74px;
}
header .menubar.white{
height: 74px;
border-bottom:1px solid #d5d0c3;
background-color: rgba(255, 255, 255, .8);
}
header .menubar.white .brand .normal{
margin-top: 15px;
display: block;
border-radius: 50%;
}
header .menubar.white .menus li a{
line-height: 74px;
color: #676767;
}
header .menubar.white .menus li:hover a{
color: #b13e3e;
background-color: #eee;
}
header .menubar.white .brand .black{
display: none;
}
header .menubar .oper{
float: right;
height: 100%;
font-size: 16px;
color: #b13e3e;
width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 65px;
margin-right: 20px;
background-size: 18%;
background-image: url("../images/favicon2.jpg");
background-position: 10px center;
background-repeat: no-repeat;
}
header .menubar.white .oper a{
color: #b13e3e;
}
header .menubar.white .oper a:hover{
text-decoration: underline;
}
header .menubar.white .oper{
line-height: 74px;
}
header .menubar.black{
height: 50px;
border-bottom: 1px solid #6f6657;
background-color: rgba(0, 0, 0, .5);
}
header .menubar.black .brand .normal{
display: none;
}
header .menubar.black .brand .black{
margin-top:5px;
display: block;
border-radius: 50%;
}
header .menubar.black .menus{
margin-left: 100px;
}
header .menubar.black .menus li a{
line-height: 50px;
color: #d5d5d5;
}
header .menubar.black .menus li:hover a{
color: #fff;
background-color: #403b3b;
}
header .menubar.black .oper{
color: #d5d5d5;
}
header .menubar.black .oper a{
color: #d5d5d5;
font-size: 14px;
}
header .menubar.black .oper a:hover{
text-decoration: underline;
}
header .menubar.black .oper{
line-height: 50px;
background-size: 15%;
}
/*头部结束*/
/*主体部分*/
/*section-wrap start*/
body{
overflow: hidden;
}
.section-wrap{
width: 100%;
height: 100%;
transform: translateY(0%);
-moz-transform: translateY(0%);
-webkit-transform: translateY(0%);
-o-transform: translateY(0%);
}
.section-wrap .section{
width: 100%;
height: 100%;
overflow: hidden;
}
.section-wrap .section.section-1{
position: relative;
}
.section-wrap .section.section-1 .layer{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.section-wrap .section.section-2{
/*background-image: url("../images/04_kiss.jpg");*/
position: relative;
}
.section-wrap .section.section-2 img.qx{
transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
position: absolute;
bottom: 0;
left: 0;
}
.section-wrap .section.section-2 img.tb{
transform: translateX(100%);
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-o-transform: translateX(100%);
position: absolute;
bottom: 0;
right: 0;
}
.section-wrap .section.section-2.action img{
transform: translateX(0%);
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
-o-transform: translateX(0%);
}
.section-wrap .section.section-3{
background: url("../images/04_kiss.jpg") no-repeat center/cover ;
border-radius: 50%;
}
.section-wrap .section.section-4{
background: url("../images/02.jpg") no-repeat center/contain;
border-radius: 100px;
}
.section-wrap .section.section-5{
background: url("../images/14.jpg") no-repeat center/cover;
border-radius: 50%;
}
/*section-wrap end*/
/*主体结束*/
index文件夹下的index.js
/**
* Created by Auser on 2016/12/25.
*/
$(function () {
var $sectionWrap=$(".section-wrap");
//索引
var index=0;
//加锁
var lock =true;
//定义最大的一个
var last=$sectionWrap.find('li.section').length-1;
// console.log(last);
var $header = $("header");
var $menu = $header.find(".menubar");
//滚动第一面的时候做的事件
function onBeforeWheel(index){
$header.addClass("hide");
$(".section-2").removeClass("action");
}
//滚动最后一页做的事件
function onAfterWheel(index){
if(index==0){
$menu.removeClass("black").addClass("white");
}else{
$menu.removeClass("white").addClass("black");
}
if(index==1){
$(".section-2").addClass("action");
}
$header.removeClass("hide");
}
//根据滚动事件
$(document.body).on("mousewheel", function (e) {
//根据e.originalEvent.deltay来改变滚动的高度
// console.log(e.originalEvent.deltaY);
var dir=e.originalEvent.deltaY<0;
// if(dir){
// // console.log("向上");
// index--;
// }else{
// // console.log("向下");
// index++;
// }
if(lock){
lock=false;
onBeforeWheel(index);
dir?index--:index++;
index = Math.min(index,last);
index = Math.max(index,0);
$sectionWrap.css({
"transform": "translateY(-"+index+"00%)",
"-moz-transform": "translateY(-"+index+"00%)",
"-webkit-transform": "translateY(-"+index+"00%)",
"-o-transform": "translateY(-"+index+"00%)"
})
setTimeout(function () {
lock=true;
onAfterWheel(index);
},1000)
}
})
});