1.实现效果图
carousel-3D-perspective
3D轮播图，景深效果perspective，保持preserve-3d
轮播图
infinity无限动画循环，入场-出场动画移动translate
移动opacity
offset应用，照片4等分移动缩放
图片炸裂
canvas应用：彩色冒泡效果，opacity应用：覆盖显隐效果，文字飞入飞出
鼠标移动气泡出入场
1. 主js动画
$(function() {
var navIndicator = document.querySelector("#wrap > #head > .head-main > .nav-arrow");
var navLis = document.querySelectorAll("#wrap > #head > .head-main > .nav-content > .nav-content-ul > li");
var firstNavLi = navLis[0];
var navLiFirstHover = firstNavLi.querySelector(".hover-nav");
//查询同级下标签，不使用>
var navLiAllHover = document.querySelectorAll("#wrap > #head > .head-main > .nav-content > .nav-content-ul > li .hover-nav");
//获取main-head
var head = document.querySelector("#wrap > #head");
//获取内容区
var content = document.querySelector("#wrap > #content");
var contentLis = document.querySelectorAll("#wrap > #content >.content-ul > li")
var contentUL = document.querySelector("#wrap > #content >.content-ul");
//滚轮--》每次获取视口，需要index每次改变i，且计入切屏动画
var indexDef = 0;
//滚轮延时
var scrollDelay = 0;
//|-3.轮播图交互，如果两个元素之间存在如section没有指定，则不用> ，空格代替
var carouselIconLi = document.querySelectorAll("#wrap > #content >.content-ul >.home .carousel-icon > li");
var carouselDotLi = document.querySelectorAll("#wrap > #content >.content-ul >.home .carousel-dot > li");
//再次开启自动轮播，鼠标覆盖
var homeIcon = document.querySelector("#wrap > #content >.content-ul >.home .carousel-icon");
//dot-li上一次点击index
var dotPreviesIndex = 0;
//自动轮播定时器
var autoCarouselInterval = 0;
var intervalIndex = 0;
//图片分割炸裂效果，如果中间有间隔的元素未申明(如section)，则两个元素之前用空格，不用>连接
var canvasUL = document.querySelectorAll("#wrap > #content > .content-ul > .about .about-canvas > .item > ul");
//页面原点交互
var contentULDot = document.querySelectorAll("#wrap > #content > .content-ul-dot > li");
//气泡节点
var memberULli = document.querySelectorAll("#wrap > #content > .content-ul > .team .team-member > .member-ul > li");
//结束覆盖，获取整个ul
var memberUL = document.querySelector("#wrap > #content > .content-ul > .team .team-member > .member-ul");
//画布位置
var teamMember = document.querySelector("#wrap > #content > .content-ul > .team .team-member");
console.log("这里是member-li：", memberULli);
//切屏变量：上一屏,需要鼠标滚轮，点击nav导航navLis[i]，点击dot按钮contentULDot[i]
previousIndex=0;
//音频
var navAudio=document.querySelector("#wrap > #head > .head-main > .nav-audio");
var audios=document.querySelector("#wrap > #head > .head-main > .nav-audio > audio");
//变量提升，变量必须写在函数执行之前
//1.头部交互
headBinder();
function headBinder() {
console.log("第一个li标签的left：", firstNavLi.offsetLeft);
//箭头left:li的left+li的自身width/2-箭头的width/2
navIndicator.style.left = firstNavLi.offsetLeft + firstNavLi.offsetWidth / 2 - navIndicator.offsetWidth / 2 + "px";
//默认home黑色
navLiFirstHover.style.width = "100%";
/*
* 1.循环绑定li事件
*/
console.log(navLiAllHover);
for(var i = 0; i < navLis.length; i++) {
//绑定节点属性index计入下标，跨过异步
navLis[i].index = i;
console.log("点击li: ", navLis[i].index);
navLis[i].onclick = function() {
//赋值操作之前，计入上一屏
previousIndex=indexDef;
//传入nav-li-node参数
indicatorNav(this.index);
indexDef = this.index;
}
}
//7.页面圆点跳转:绑定工具类箭头移动--indicatorNav(index);
for(var i = 0; i < contentULDot.length; i++) {
//绑定节点属性index计入下标，跨过异步
contentULDot[i].index = i;
contentULDot[i].onclick = function() {
//赋值操作之前，计入上一屏
previousIndex=indexDef;
//传入nav-li-node参数，修改className参数
indicatorNav(this.index);
indexDef = this.index;
}
}
}
//2.内容区交互，每次缩放页面，需要再次获取视口
window.onresize = function() {
contentBinder();
contentUL.style.top = -indexDef * (document.documentElement.clientHeight - head.offsetHeight) + "px";
//移动箭头
navIndicator.style.left = navLis[indexDef].offsetLeft + navLis[indexDef].offsetWidth / 2 - navIndicator.offsetWidth / 2 + "px";
}
//2.1切屏
contentBinder();
function contentBinder() {
//内容区高度=视口高度-head高度
content.style.height = document.documentElement.clientHeight - head.offsetHeight + "px";
for(var i = 0; i < contentLis.length; i++) {
contentLis[i].style.height = document.documentElement.clientHeight - head.offsetHeight + "px";
}
}
//2.2滚轮
/*
* * 滚轮事件
捕获事件：前提是有嵌套的dom结构，子元素存在父级
目标处理事件：div无嵌套处理
冒泡事件：前提是有嵌套的dom结构
ie/chrome : onmousewheel(dom0)
event.wheelDelta
上：120
下：-120
firefox : DOMMouseScroll 必须用(dom2的标准模式)
event.detail
上：-3
下：3
*/
if(content.addEventListener) {
content.addEventListener("DOMMouseScroll", function(e) {
e = e || event;
//每次滚动清空delay时间
clearTimeout(scrollDelay);
//避免滚轮滑动多次滑屏，设置延时,超过时间则清空事件e
scrollDelay = setTimeout(function() {
scrollContent(e);
}, 200)
});
}
//2.3监听后执行滚动
content.onmousewheel = function(e) {
e = e || event;
//每次滚动清空delay时间
clearTimeout(scrollDelay);
//避免滚轮滑动多次滑屏，设置延时
scrollDelay = setTimeout(function() {
scrollContent(e);
}, 200)
};
//3.carousel轮播图
contentHome3DCarousel();
function contentHome3DCarousel() {
//i和j存在两个作用域，可同名
for(var i = 0; i < carouselDotLi.length; i++) {
//存取当前[i]
carouselDotLi[i].index = i;
carouselDotLi[i].onclick = function() {
//点击时，清除自动轮播定时器carouselAUTO下的
clearInterval(autoCarouselInterval);
for(var j = 0; j < carouselDotLi.length; j++) {
//自带removeClass
//carouselDotLi[j].classList.remove("active");
//工具类,这里使用this，不会将，其他的li移除active
removeClass(carouselDotLi[j], "active");
}
//this.classList.add("active");
addClass(this, "active");
/*轮播图绑定*4个属性
1.carouselLeftOut左消失：开始向左偏移：左消失，右出现
|- visibility: hidden;
|- animation: 1s carouselLeftHide 1 linear;
2.carouselRightIn右出现
|- visibility: visible;
|- animation: 1s carouselRightShow 1 linear;
3.carouselLeftIn左出现：开始向右偏移：左出现，右消失
|- visibility: visible;
|- animation: 1s carouselLeftShow 1 linear;
4.carouselRightOut右消失
|- visibility: hidden;
|- animation: 1s carouselRightHide 1 linear;
*/
//从左向右点击=index[j]>index[j-1],rightShow
if(this.index > dotPreviesIndex) {
/*//清除当前index：其他样式
carouselIconLi[this.index].classList.remove("carouselLeftOut");
carouselIconLi[this.index].classList.remove("carouselLeftIn");
carouselIconLi[this.index].classList.remove("carouselRightOut");
carouselIconLi[this.index].classList.add("carouselRightIn");
//清除上一个index：其他样式
carouselIconLi[dotPreviesIndex].classList.remove("carouselRightIn");
carouselIconLi[dotPreviesIndex].classList.remove("carouselLeftIn");
carouselIconLi[dotPreviesIndex].classList.remove("carouselRightOut");
carouselIconLi[dotPreviesIndex].classList.add("carouselLeftOut");*/
//工具类删除
removeClass(carouselIconLi[this.index], "carouselLeftOut");
removeClass(carouselIconLi[this.index], "carouselLeftIn");
removeClass(carouselIconLi[this.index], "carouselRightOut");
addClass(carouselIconLi[this.index], "carouselRightIn");
removeClass(carouselIconLi[dotPreviesIndex], "carouselRightIn");
removeClass(carouselIconLi[dotPreviesIndex], "carouselLeftIn");
removeClass(carouselIconLi[dotPreviesIndex], "carouselRightOut");
addClass(carouselIconLi[dotPreviesIndex], "carouselLeftOut");
}
//从右向左点击=index[j]<index[j+1]，leftShow
if(this.index < dotPreviesIndex) {
/*//清除当前index：其他样式，取反
carouselIconLi[this.index].classList.remove("carouselLeftOut");
carouselIconLi[this.index].classList.remove("carouselRightOut");
carouselIconLi[this.index].classList.remove("carouselLeftIn");
carouselIconLi[this.index].classList.add("carouselRightIn");
//清除上一个index：其他样式，取反
carouselIconLi[dotPreviesIndex].classList.remove("carouselLeftIn");
carouselIconLi[dotPreviesIndex].classList.remove("carouselRightIn");
carouselIconLi[dotPreviesIndex].classList.remove("carouselRightOut");
carouselIconLi[dotPreviesIndex].classList.add("carouselLeftOut");*/
//工具类添加
removeClass(carouselIconLi[this.index], "carouselLeftOut");
removeClass(carouselIconLi[this.index], "carouselRightOut");
removeClass(carouselIconLi[this.index], "carouselLeftIn");
addClass(carouselIconLi[this.index], "carouselRightIn");
removeClass(carouselIconLi[dotPreviesIndex], "carouselLeftIn");
removeClass(carouselIconLi[dotPreviesIndex], "carouselRightIn");
removeClass(carouselIconLi[dotPreviesIndex], "carouselRightOut");
addClass(carouselIconLi[dotPreviesIndex], "carouselLeftOut");
}
//每次点击之后传入
dotPreviesIndex = this.index;
//手动轮播--》传递而自动轮播index
intervalIndex = this.index;
//点击后，重新开启自动轮播
carouselAUTO();
}
}
}
//4.自动轮播：从左向右
carouselAUTO();
function carouselAUTO() {
//进入后避免触发2次interval
clearInterval(autoCarouselInterval);
autoCarouselInterval = setInterval(function() {
//intervalIndex索引小标为下一次轮播的previousIndex
intervalIndex++;
//无缝轮播：=5返回1
if(intervalIndex == carouselIconLi.length) {
intervalIndex = 0;
}
//原点同步
for(var j = 0; j < carouselDotLi.length; j++) {
//自带removeClass
//carouselDotLi[j].classList.remove("active");
//工具类,这里使用this，不会将，其他的li移除active
removeClass(carouselDotLi[j], "active");
}
addClass(carouselDotLi[intervalIndex], "active");
removeClass(carouselIconLi[intervalIndex], "carouselLeftOut");
removeClass(carouselIconLi[intervalIndex], "carouselLeftIn");
removeClass(carouselIconLi[intervalIndex], "carouselRightOut");
addClass(carouselIconLi[intervalIndex], "carouselRightIn");
removeClass(carouselIconLi[dotPreviesIndex], "carouselRightIn");
removeClass(carouselIconLi[dotPreviesIndex], "carouselLeftIn");
removeClass(carouselIconLi[dotPreviesIndex], "carouselRightOut");
addClass(carouselIconLi[dotPreviesIndex], "carouselLeftOut");
//自动轮播--->手动轮播同步，必须设置previous值
dotPreviesIndex = intervalIndex;
}, 3000);
}
//5.鼠标覆盖轮播
homeIconHover();
function homeIconHover() {
//鼠标进入
homeIcon.onmouseenter = function() {
clearInterval(autoCarouselInterval);
};
//鼠标移出
homeIcon.onmouseleave = function() {
carouselAUTO();
}
}
//6.图片4等分
canvasULImageBoom();
function canvasULImageBoom() {
for(var i = 0; i < canvasUL.length; i++) {
//图片分割炸裂函数
boomCanvas(canvasUL[i]);
}
}
//8.第五屏：气泡效果
canvasBubble();
function canvasBubble() {
//判断是否存在气泡
var bubbleFlag = null;
//时间定时器
var bubbleGenerate = 0;
var bubbleMove = 0;
for(var i = 0; i < memberULli.length; i++) {
//绑定事件为异步代码，需要index，或者在点击事件内部进行再次遍历
memberULli[i].onmouseenter = function() {
for(var j = 0; j < memberULli.length; j++) {
memberULli[j].style.opacity = .5;
}
this.style.opacity = 1;
//气泡动画
bubbles();
bubbleFlag.style.left = this.offsetLeft + "px";
}
}
//7.气泡动画
function bubbles() {
if(!bubbleFlag) {
bubbleFlag = document.createElement("canvas");
bubbleFlag.width = memberULli[0].offsetWidth;
bubbleFlag.height = memberULli[0].offsetHeight * 2 / 3;
//鼠标离开，离开画布div
teamMember.onmouseleave = function() {
for(var j = 0; j < memberULli.length; j++) {
memberULli[j].style.opacity = 1;
}
removeBubbleFlag();
}
//插入画布
teamMember.appendChild(bubbleFlag);
bubblesModule();
}
}
/*memberUL.onmouseleave = function() {
for(var j = 0; j < memberULli.length; j++) {
memberULli[j].style.opacity = 1;
}
}*/
//移除canvas
function removeBubbleFlag() {
bubbleFlag.remove();
bubbleFlag = null;
//清除冒泡定时器
clearInterval(bubbleGenerate);
clearInterval(bubbleMove);
}
//6.气泡组件
function bubblesModule() {
/*var canvasNode = document.querySelector("#wrap-canvas");*/
if(bubbleFlag.getContext) {
var canvasPen = bubbleFlag.getContext("2d");
/***简易canvas动画position***/
/*var flag=0;
setInterval(function(){
//每次进入清理画布
canvasPen.clearRect(0,0,canvasNode.width,canvasNode.height);
flag++;
canvasPen.save();
canvasPen.strokeStyle="white";
canvasPen.beginPath();
//位置变动
canvasPen.strokeRect(flag,flag,100,100);
canvasPen.restore();
//1s/60次
},1000/60);*/
/*arc(x,y（圆形位置）,radius半径,startAngle开始角度,endAngle结束角度,anticlockwise时间方向-true逆时针|false顺时针)
|- arc(x,y,radius,startAngle,endAngle,anticlockwise)
|- canvasPen.arc(150,150,10,0,360*Math.PI/180);
Math.random -->返回[0-1)：包括0，但不包括1
* 开区间(a,b) : a和b之间，不包括a、b
* 闭区间[a,b] : a和b之间，包括a、b
* Math.random()*mosaicSize=[0,5]
* 1个像素的mosaic：并且需要向下取整Math.floor(Math.random()*mosaicSize)=[0,5)-->[0-4]
*/
//随机圆位置
var positionArr = [];
//1.绘制圆
bubbleGenerate = setInterval(function() {
//radius最小值=5
var radius = Math.random() * 6 + 2;
var x = Math.random() * bubbleFlag.width;
//var y = Math.random() * bubbleFlag.height;
//取消随机y轴，
var y = bubbleFlag.height - radius;
//颜色随机，取整
var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
var a = 1;
//运动曲线，旋转deg，起始点，影响因子,因子越大，旋转deg幅度越大
var deg = 0;
var initialX = x;
var initialY = y;
//var effect = 20;
//随机因子
var effect = Math.random() * 20 + 10;
positionArr.push({
x: x,
y: y,
radius: radius,
r: r,
g: g,
b: b,
a: a,
deg: deg,
initialX: initialX,
initialY: initialY,
effect: effect
});
}, 50);
//2.将数组中的圆绘制到画布
bubbleMove = setInterval(function() {
canvasPen.clearRect(0, 0, bubbleFlag.width, bubbleFlag.height);
//每次进入循环，半径变化
//console.log(positionArr);
//1.生成动画
for(var j = 0; j < positionArr.length; j++) {
//限制max最大值,不限制则成为无限放大循环梦幻斑点，可取消判断
/*if(positionArr[j].radius<=80){
positionArr[j].radius++;
}*/
//透明度<0，不需要绘制画布,Radius随机，不需要指定半径和透明度
/*if(positionArr[j].a<=0){
//去掉第j个元素，去掉1个
positionArr.splice(j,1);
}
positionArr[j].radius++;
positionArr[j].a-=0.01;*/
/*曲线运动,系数增加运动速度*/
positionArr[j].deg += 7;
//更改圆心
/*canvasNode.style.left=initialX+(deg*Math.PI/180)*effect/2+"px";
canvasNode.style.top=initialY+Math.sin(deg*Math.PI/180)*effect*2+"px";*/
//canvas不加ps，顺时针自左向右旋转
/*positionArr[j].x = positionArr[j].initialX + (positionArr[j].deg * Math.PI / 180) * positionArr[j].effect / 2 ;
positionArr[j].y = positionArr[j].initialY + Math.sin(positionArr[j].deg * Math.PI / 180) * positionArr[j].effect * 2;*/
//自下而上旋转
positionArr[j].x = positionArr[j].initialX + Math.sin(positionArr[j].deg * Math.PI / 180) * positionArr[j].effect * 2;
//曲线运动波长配置：positionArr[j].effect * 2
positionArr[j].y = positionArr[j].initialY - (positionArr[j].deg * Math.PI / 180) * positionArr[j].effect;
//判断位置大于画布则删除,最高top=y
if(positionArr[j].y <= 50) {
positionArr.splice(j, 1);
}
}
//2.生成动画元数据：绘制随机数组的圆
for(var i = 0; i < positionArr.length; i++) {
canvasPen.save();
//随机色
canvasPen.fillStyle = "rgba(" + positionArr[i].r + "," + positionArr[i].g + "," + positionArr[i].b + "," + positionArr[i].a + ")";
canvasPen.beginPath();
canvasPen.arc(positionArr[i].x, positionArr[i].y, positionArr[i].radius, 0, 2 * Math.PI);
canvasPen.fill();
canvasPen.restore();
}
//每秒60次
}, 1000 / 60);
}
}
}
/**出入场**/
//所有屏的出入场状态数组
var outInAnimations = [
//9.1第一屏
{
outAnimation: function() {
//轮播图carousel在上面,获取轮播图ul
var carouselIcon = document.querySelector("#wrap > #content >.content-ul >.home .carousel-icon");
//dot选择点在下面，获取dot-ul
var carouselDot = document.querySelector("#wrap > #content >.content-ul >.home .carousel-dot");
carouselIcon.style.transform = "translateY(-500px)";
carouselDot.style.transform = "translateY(150px)";
carouselIcon.style.opacity = 0;
carouselDot.style.opacity = 0;
},
inAnimation: function() {
var carouselIcon = document.querySelector("#wrap > #content >.content-ul >.home .carousel-icon");
var carouselDot = document.querySelector("#wrap > #content >.content-ul >.home .carousel-dot");
carouselIcon.style.transform = "translateY(0px)";
carouselDot.style.transform = "translateY(0px)";
carouselIcon.style.opacity = 1;
carouselDot.style.opacity = 1;
}
},
//9.2第二屏
{
outAnimation: function() {
var plane1 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane1");
var plane2 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane2");
var plane3 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane3");
plane1.style.transform = "translate(-200px, -100px)";
plane2.style.transform = "translate(-300px, 600px)";
plane3.style.transform = "translate(500px, -200px)";
plane1.style.opacity = 0;
plane2.style.opacity = 0;
plane3.style.opacity = 0;
},
inAnimation: function() {
var plane1 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane1");
var plane2 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane2");
var plane3 = document.querySelector("#wrap > #content >.content-ul > .company .paper-plane3");
plane1.style.transform = "translate(0px, 0px)";
plane2.style.transform = "translate(0px, 0px)";
plane3.style.transform = "translate(0px, 0px)";
plane1.style.opacity = 1;
plane2.style.opacity = 1;
plane3.style.opacity = 1;
}
},
//9.3第三屏
{
outAnimation: function() {
var pencel1 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-1");
var pencel2 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-2");
var pencel3 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-3");
pencel1.style.transform = "translate(1100px,0px) rotate(360deg)";
pencel2.style.transform = "translate(888px,0px) rotate(270deg)";
pencel3.style.transform = "translate(999px,600px) rotate(180deg)";
pencel1.style.opacity = 0;
pencel2.style.opacity = 0;
pencel3.style.opacity = 0;
},
inAnimation: function() {
var pencel1 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-1");
var pencel2 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-2");
var pencel3 = document.querySelector("#wrap > #content >.content-ul > .product .pencel-3");
pencel1.style.transform = "translate(0px,0px) rotate(0deg)";
pencel2.style.transform = "translate(0px,0px) rotate(0deg)";
pencel3.style.transform = "translate(0px,0px) rotate(0deg)";
pencel1.style.opacity = 1;
pencel2.style.opacity = 1;
pencel3.style.opacity = 1;
}
},
//9.4第四屏
{
outAnimation: function() {
var canvasImg1 = document.querySelector("#wrap > #content > .content-ul > .about .about-canvas > .item:nth-child(1)");
var canvasImg2 = document.querySelector("#wrap > #content > .content-ul > .about .about-canvas > .item:nth-child(2)");
canvasImg1.style.transform = "rotate(50deg)";
canvasImg2.style.transform = "rotate(-50deg)";
},
inAnimation: function() {
var canvasImg1 = document.querySelector("#wrap > #content > .content-ul > .about .about-canvas > .item:nth-child(1)");
var canvasImg2 = document.querySelector("#wrap > #content > .content-ul > .about .about-canvas > .item:nth-child(2)");
canvasImg1.style.transform = "rotate(0deg)";
canvasImg2.style.transform = "rotate(0deg)";
}
},
//9.5第五屏
{
outAnimation: function() {
var teamHeader = document.querySelector("#wrap > #content > .content-ul > .team .team-header");
var teamIntro = document.querySelector("#wrap > #content > .content-ul > .team .team-intro");
teamHeader.style.transform = "translate(-200px,0px)";
teamIntro.style.transform = "translate(1200px,0px)";
teamHeader.style.opacity = 0;
teamIntro.style.opacity = 0;
},
inAnimation: function() {
var teamHeader = document.querySelector("#wrap > #content > .content-ul > .team .team-header");
var teamIntro = document.querySelector("#wrap > #content > .content-ul > .team .team-intro");
teamHeader.style.transform = "translate(0px,0px)";
teamIntro.style.transform = "translate(0px,0px)";
teamHeader.style.opacity = 1;
teamIntro.style.opacity = 1;
}
},
];
//9.模拟出入场
/*outInScreen();
function outInScreen() {
outInAnimations[1].outAnimation();
//延迟
setTimeout(function() {
outInAnimations[1].inAnimation();
}, 2000);
}*/
//9.自动切场动画
for(var i = 0; i < outInAnimations.length; i++) {
//全部出场,在工具类，indicatorNav中进行动画入场
outInAnimations[i]["outAnimation"]();
}
//9.模拟出入场-一次性
setTimeout(function() {
outInAnimations[0].inAnimation();
console.log("进来了？？？");
}, 200);
//10.音频
audioControl();
function audioControl(){
navAudio.onclick=function(){
if(audios.paused){
audios.play();
navAudio.style.background="url(img/musicon.gif) no-repeat";
}else{
audios.pause();
navAudio.style.background="url(img/musicoff.gif) no-repeat";
}
}
}
/**工具类**/
//1.nav箭头移动
//自定义调屏,如果有开机动画out-in-screen.js的启用，那么这里要做优化，在动画执行完毕后调用
indicatorNav(0);
function indicatorNav(index) {
for(var j = 0; j < navLiAllHover.length; j++) {
//navLiAllHover[j].style.width="0";
//这里设置为0，css中的hover样式将不再生效，需要设置为空
navLiAllHover[j].style.width = "";
}
//异步执行，不可使用navLiAllHover[i].style，也不可使用this，this=navLis[i]
navLiAllHover[index].style.width = "100%";
//移动箭头
navIndicator.style.left = navLis[index].offsetLeft + navLis[index].offsetWidth / 2 - navIndicator.offsetWidth / 2 + "px";
//切换屏-向上，和视口client有关的left位置属性，需要在页面resize时重新获取
contentUL.style.top = -index * (document.documentElement.clientHeight - head.offsetHeight) + "px";
//点击圆点跳转
for(var i = 0; i < contentULDot.length; i++) {
contentULDot[i].className = "";
}
contentULDot[index].className = "active";
//一次性触发：切屏入场，当前index中包含出入场动画，并且，这个index携带的animation是一个function
if(outInAnimations[index] && typeof outInAnimations[index]["inAnimation"] === "function") {
outInAnimations[index]["inAnimation"]();
}
//循环触发，上一屏复位出场
if(outInAnimations[previousIndex] && typeof outInAnimations[previousIndex]["outAnimation"] === "function") {
outInAnimations[previousIndex]["outAnimation"]();
}
}
//2.滚屏
function scrollContent(e) {
e = e || event;
//判断方向
var direction = "";
if(e.wheelDelta) {
direction = e.wheelDelta > 0 ? "up" : "down";
} else if(e.detail) {
direction = e.detail < 0 ? "up" : "down";
}
//上一屏的索引
previousIndex=indexDef;
switch(direction) {
case "up":
//向上，indexDef变小,需要递减
if(indexDef > 0) {
indexDef--;
indicatorNav(indexDef);
}
break;
case "down":
if(indexDef < contentLis.length - 1) {
indexDef++;
indicatorNav(indexDef);
}
break;
}
}
//3.添加class
function addClass(node, className) {
var reg = new RegExp("\\b" + className + "\\b");
if(!reg.test(node.className)) {
node.className += (" " + className);
}
}
//4.移除class
function removeClass(node, className) {
if(node.className) {
var reg = new RegExp("\\b" + className + "\\b");
var classes = node.className;
node.className = classes.replace(reg, "");
if(/^\s*$/g.test(node.className)) {
node.removeAttribute("class");
}
} else {
node.removeAttribute("class");
}
}
//5.第四屏图片:4等分
function boomCanvas(canvasUls) {
//获取ul图片data-src
ulImg = canvasUls.dataset.src;
//图片宽度：w：260 h：200 radius：8 四等分=1/2
var ulImgWidth = canvasUls.offsetWidth / 2;
var ulImgHeight = canvasUls.offsetHeight / 2;
//创建图片4份分割
for(var i = 0; i < 4; i++) {
//存入i，实现异步调用indnex
//canvasUls.flag=i;
var liNodes = document.createElement("li");
liNodes.style.width = ulImgWidth + "px";
liNodes.style.height = ulImgHeight + "px";
var imgNode = document.createElement("img");
/*1.四等分坐标
* 左上：left:0 top:0 i%2=0 i/2=0
* 右上：left:-width top:0 -i%2=1 i/2=0.5(向下取整Math.floor)
* 左下：left:0 top:-height i%2=0 i/2=1
* 右下：left:-width top:-height -i%2=1 i/2=1.5(向下取整)
*/
imgNode.style.left = -(i % 2) * ulImgWidth + "px";
imgNode.style.top = -Math.floor(i / 2) * ulImgHeight + "px";
//复制图片src
imgNode.src = ulImg;
//li：放入img
liNodes.appendChild(imgNode);
//ul：放入li标签
canvasUls.appendChild(liNodes);
}
//6.图片炸裂
canvasUls.onmouseenter = function() {
/* 4等分的动画变化
* 左上：top:height left:0
右上：top:0 left:-2width
左下：top:-height left:width
右下：top:-2height left:-width
*/
var canvasLiImg = this.querySelectorAll("li > img");
canvasLiImg[0].style.top = ulImgHeight + "px";
canvasLiImg[1].style.left = -2 * ulImgWidth + "px";
//canvasLiImg[2].style.top=-ulImgHeight+"px";
canvasLiImg[2].style.left = ulImgWidth + "px";
canvasLiImg[3].style.top = -2 * ulImgHeight + "px";
//canvasLiImg[3].style.left="px";
}
canvasUls.onmouseleave = function() {
var canvasLiImg = this.querySelectorAll("li > img");
canvasLiImg[0].style.top = 0 + "px";
canvasLiImg[1].style.left = -ulImgWidth + "px";
canvasLiImg[2].style.left = 0 + "px";
canvasLiImg[3].style.top = -ulImgHeight + "px";
}
}
})
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775图片4等分，translate图解
图片炸裂实现offset图解
2.出入场js
$(function(){
var maskUp=document.querySelector("#wrap > #open-mask > .mask-up");
var maskDown=document.querySelector("#wrap > #open-mask > .mask-down");
var maskLine=document.querySelector("#wrap > #open-mask > .mask-line");
//全部查询div
var maskDiv=document.querySelectorAll("#wrap > #open-mask div");
//loading后，消除mask
var openMask=document.querySelector("#wrap > #open-mask");
//音频
var navAudio=document.querySelector("#wrap > #head > .head-main > .nav-audio");
var audios=document.querySelector("#wrap > #head > .head-main > .nav-audio > audio");
console.log("maskDiv:",maskDiv);
//开机动画:loading
loadingMask();
function loadingMask(){
//各图片地址，模拟请求
var imgArr=['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','about1.jpg','about2.jpg','about3.jpg','about4.jpg','worksimg1.jpg','worksimg2.jpg','worksimg3.jpg','worksimg4.jpg','team.png','greenLine.png'];
//统计资源加载成功
var loadFlag=0;
for(var i=0;i<imgArr.length;i++){
var img=new Image();
img.src="img/"+imgArr[i];
img.onload=function(){
loadFlag++;
//宽度百分比
maskLine.style.width=loadFlag/imgArr.length*100+"%";
}
}
maskLine.addEventListener("transitionend",function(){
//line的动画之后，打开up/down
if(loadFlag===imgArr.length){
for(var j=0;j<maskDiv.length;j++){
maskDiv[j].style.height=0+"px";
}
}
//线消失
this.style.display="none";
});
//移除遮罩
maskDiv[1].addEventListener("transitionend",function(){
openMask.remove();
//开机动画结束后，播放audio
audios.play();
});
}
})
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051528.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>一刀coder官网-tech by cevent</title>
</head>
<link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/out-in-screen.css" />
<body>
<!--小节/段落语义化标签，相当于div
* <hgroup>：代表网页或section的标题，当元素由多个层级时，该元素可以将h1-h6放入，如文章的主标题和副标题的组合。
* <hgroup>
* <h1>网站标题</h1>
* <h2>网站副标题</h2>
* </hgroup>
* <header>
* <nav>代表页面的导航链接区域
* <section>代表页面中独立的节、段内容
* <article>代表一个文档
* <footer>
-->
<!--视口-->
<section id="wrap">
<!--
作者：15400001771@qq.com
时间：2021-02-14
描述：开机动画
-->
<div id="open-mask">
<div class="mask-up"></div>
<div class="mask-down"></div>
<div class="mask-line"></div>
</div>
<!--流体布局-->
<header id="head">
<!--固定布局:头部-->
<div class="head-main">
<!--1.网站标题，搜索引擎检索网站时，首先查询h1信息-->
<h1 class="nav-logo">
<a href="javascript:;">
<img src="img/logo-188-31-4.png" />
</a>
</h1>
<div class="nav-audio">
<!--自动播放：autoplay="autoplay" ,可以直接使用autoplay,设置开机动画后，这里不使用autoplay-->
<audio src="audio/X-Ray Dog - Flight Of Dreams.mp3" loop="loop"></audio>
</div>
<!--2.网站导航，搜索引擎检索，清除浮动clearfix-->
<nav class="nav-content">
<ul class="nav-content-ul clearfix">
<li>
<a href="avascript:;">
<div class="hover-nav">
<img src="img/home_gruen.png" />
</div>
<div class="main-nav">
<img src="img/home.png" />
</div>
</a>
</li>
<li>
<a href="avascript:;">
<div class="hover-nav">
Company
</div>
<div class="main-nav">
Company
</div>
</a>
</li>
<li>
<a href="avascript:;">
<div class="hover-nav">
Product
</div>
<div class="main-nav">
Product
</div>
</a>
</li>
<li>
<a href="avascript:;">
<div class="hover-nav">
About
</div>
<div class="main-nav">
About
</div>
</a>
</li>
<li>
<a href="avascript:;">
<div class="hover-nav">
Team
</div>
<div class="main-nav">
Team
</div>
</a>
</li>
</ul>
</nav>
<!--3.箭头-->
<div class="nav-arrow"></div>
</div>
</header>
<!--内容区:每个li占一个屏
固定布局：ul
流体布局：li --》子标签section固定布局
-->
<section id="content">
<ul class="content-ul">
<li class="home">
<section>
<ul class="carousel-icon">
<li class="commonTitle active ">
<div class="item">1</div>
</li>
<li class="commonTitle">
<div class="item">2</div>
</li>
<li class="commonTitle">
<div class="item">3</div>
</li>
<li class="commonTitle">
<div class="item">4</div>
</li>
<li class="commonTitle">
<div class="item">5</div>
</li>
</ul>
<ul class="carousel-dot">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</li>
<li class="company">
<section>
<header class="com-header commonTitle">
<span>JAVA</span><br />
<span>Springboot</span><br />
<span>Mybatis</span>
</header>
<div class="com-intro commonP">
<p>product show center以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>technology show center以技术为跳板，组件化开发模式，多场景全链路。做国内一流互联网产品研发公司。</p>
</div>
<div class="com-icon-wall">
<span class="wall-line"></span>
<span class="wall-line"></span>
<span class="wall-line"></span>
<span class="wall-line"></span>
<span class="wall-line"></span>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
<div class="item">
<div class="icon-behind"></div>
<div class="icon-front">technology show center以技术为跳板，组件化开发模式</div>
</div>
</div>
<div class="paper-plane1"></div>
<div class="paper-plane2"></div>
<div class="paper-plane3"></div>
</section>
</li>
<li class="product">
<section>
<!--标题-->
<header class="pro-header commonTitle">
<span>CEVENT</span><br />
<span>一刀coder</span><br />
<span>全栈组件开发团队</span>
</header>
<!--图片列表-->
<div class="pro-list">
<div class="item">
<img src="img/worksimg1.jpg" />
<div class="mask">
<span>测试图片标题-图片列表1</span>
<div class="mask-icon"></div>
</div>
</div>
<div class="item">
<img src="img/worksimg2.jpg" />
<div class="mask">
<span>测试图片标题-图片列表2</span>
<div class="mask-icon"></div>
</div>
</div>
<div class="item">
<img src="img/worksimg3.jpg" />
<div class="mask">
<span>测试图片标题-图片列表3</span>
<div class="mask-icon"></div>
</div>
</div>
<div class="item">
<img src="img/worksimg4.jpg" />
<div class="mask">
<span>测试图片标题-图片列表4</span>
<div class="mask-icon"></div>
</div>
</div>
</div>
<!--机器人-->
<div class="pro-robot"></div>
<div class="pencel-1"></div>
<div class="pencel-2"></div>
<div class="pencel-3"></div>
</section>
</li>
<li class="about">
<section>
<header class="about-header commonTitle">
<span>React.js</span><br />
<span>MongoDB</span><br />
<span>Vue Redis</span>
</header>
<div class="about-intro commonP">
<p>product show center以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>technology show center以技术为跳板，组件化开发模式，多场景全链路。做国内一流互联网产品研发公司。</p>
</div>
<div class="about-line"></div>
<div class="about-canvas">
<div class="item">
<div class="canvas-hover"></div>
<!--使用ul设置图片，分布给4个li，分别用js生成，data-src=ul.dataset.src-->
<ul data-src="img/about1.jpg"></ul>
</div>
<div class="item">
<div class="canvas-hover"></div>
<!--自定义属性（data-v）使用ul设置图片，分布给4个li，分别用js生成-->
<ul data-src="img/about3.jpg"></ul>
</div>
</div>
</section>
</li>
<li class="team">
<section>
<header class="team-header commonTitle">
<span>bootstrap</span><br />
<span>Nacos</span>
</header>
<div class="team-intro commonP">
<p>product show center以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>technology show center以技术为跳板，组件化开发模式，多场景全链路。做国内一流互联网产品研发公司。</p>
<p>delay show page低延迟，组件化开发模式，多场景全链路。做国内一流互联网产品研发公司。</p>
</div>
<div class="team-member">
<ul class="member-ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</section>
</li>
</ul>
<ul class="content-ul-dot">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</section>
</body>
<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/open-mask.js"></script>
</html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333轮播图3D舞台+景深效果翻转