PC项目练习
PC项目练习
- HTML
- js
- 开机遮罩层样式
- 头部css
- 主体样式
- 侧边导航点
- 第一屏
- 第二屏
- 第三屏
- 第四屏
- 第五屏
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testtitle>
<link rel="stylesheet" href="../重置样式表/reset.css"/>
<link rel="stylesheet" href="./css/头部.css"/>
<link rel="stylesheet" href="./css/主体.css"/>
<link rel="stylesheet" href="./css/第三屏.css"/>
<link rel="stylesheet" href="./css/第四屏.css"/>
<link rel="stylesheet" href="./css/第二屏.css"/>
<link rel="stylesheet" href="./css/第一屏.css"/>
<link rel="stylesheet" href="./css/第五屏.css"/>
<link rel="stylesheet" href="./css/侧边导航点.css"/>
<link rel="stylesheet" href="./css/开机遮罩层.css"/>
<script type="text/javascript" src="js/test.js">script>
<style>
html,body{
height: 100%;
overflow: hidden;
font: 14px 微软雅黑;
}
a{
text-decoration: none;
}
.clearfix::before,.clearfix::after{
display: table;
clear: both;
content: "";
}
#content .commonTitle{
color:#009ee0;
font-size:80px;
line-height:0.8;
font-weight:bold;
letter-spacing:-5px;
}
#content .commonText{
color:white;
line-height:1.5;
font-size:15px;
}
style>
head>
<body>
<div class="wrap">
<div id="mask">
<div class="mask-top">div>
<div class="mask-bottom">div>
<div class="mask-line">div>
div>
<header id="header">
<div class="header-main">
<h1 class="logo">
<a href="javascript:;">
<img src="./img/logo.png" alt="logo"/>
a>
h1>
<div class="music">
<audio src="./img/audio.mp3" loop>audio>
div>
<nav class="nav">
<ul class="nav-list clearfix">
<li>
<a href="javascript:;">
<div class="up"><img src="./img/home_gruen.png"/> div>
<div class="down"><img src="./img/home.png"/> div>
a>
li>
<li>
<a href="javascript:;">
<div class="up">Coursediv>
<div class="down">Coursediv>
a>
li>
<li>
<a href="javascript:;">
<div class="up">Worksdiv>
<div class="down">Worksdiv>
a>
li>
<li>
<a href="javascript:;">
<div class="up">Aboutdiv>
<div class="down">Aboutdiv>
a>
li>
<li>
<a href="javascript:;">
<div class="up">Teamdiv>
<div class="down">Teamdiv>
a>
li>
ul>
nav>
<div class="arrows">div>
div>
header>
<section id="content">
<ul class="content-list">
<li>
<div class="home">
<ul class="home-list">
<li class="active">
<div class="commonTitle">one layerdiv>
li>
<li>
<div class="commonTitle">two layerdiv>
li>
<li>
<div class="commonTitle">three layerdiv>
li>
<li>
<div class="commonTitle">four layerdiv>
li>
ul>
<ul class="home-icon">
<li class="active">li>
<li>li>
<li>li>
<li>li>
ul>
div>
li>
<li>
<div class="course">
<header class="course-title">
<h2 class="commonTitle">
<span>EINIGEspan><br>
<span>UNSERERspan><br>
<span>KUNDENspan>
h2>
header>
<div class="course-text">
<p class="commonText">
Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen Zusammenarbeit, gleichzeitig aber auch das größte Lob, das man uns entgegenbringen kann.
<br>
Diese und viele weitere große und kleine Kunden vertrauen uns seit Jahren, was uns stolz macht, und dafür sagen wir an dieser Stelle einfach mal.
p>
div>
<div class="course-list">
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="line">div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
<div class="item">
<div class="inner">
<div class="front">div>
<div class="back">今天天气真不错div>
div>
div>
div>
<div class="plane1">div>
<div class="plane2">div>
<div class="plane3">div>
div>
li>
<li>
<div class="works">
<header class="works-title">
<h2 class="commonTitle">
<span>EINBLICKspan><br>
<span>ERKENNTNISspan><br>
<span>ERGEBNISspan>
h2>
header>
<ul class="works-img">
<li>
<img src="./img/worksimg1.jpg"/>
<div class="mask">
<span>在我的后花园span>
<div class="icon">div>
div>
li>
<li>
<img src="./img/worksimg2.jpg"/>
<div class="mask">
<span>可以看见墙外有两棵树span>
<div class="icon">div>
div>
li>
<li>
<img src="./img/worksimg3.jpg"/>
<div class="mask">
<span>一棵是枣树span>
<div class="icon">div>
div>
li>
<li>
<img src="./img/worksimg4.jpg"/>
<div class="mask">
<span>另一棵也是枣树span>
<div class="icon">div>
div>
li>
ul>
<div class="works-robot">
div>
<div class="pencel1">div>
<div class="pencel2">div>
<div class="pencel3">div>
div>
li>
<li>
<div class="about">
<header class="about-title">
<h2 class="commonTitle">
<span>DIEspan><br>
<span>SPEZIELLEspan><br>
<span>VIELFALTspan>
h2>
header>
<div class="about-text">
<p class="commonText">
Der bunte Medienmix ist die Faszination die uns antreibt und das, was man an uns schätzt. Von A bis Z und von vorne bis hinten nehmen wir Ihr Projekt unter unsere Fittiche und lassen es zu etwas Großartigem heranwachsen.
p>
div>
<div class="about-img">
<div class="item">
<span>span>
<ul data-src="./img/about1.jpg">ul>
div>
<div class="item">
<span>span>
<ul data-src="./img/about3.jpg">ul>
div>
div>
div>
li>
<li>
<div class="team">
<header class="team-title">
<h2 class="commonTitle">
<span>WIR SINDspan><br>
<span>VOXELAIRspan>
h2>
header>
<div class="team-text">
<p class="commonText">
Wir sind seit 2002 eine Full-Service-Werbeagentur mit Stammsitz in Heimsheim, zwischen Stuttgart und Karlsruhe.
<br>
Über 60 Jahre Erfahrung vereinen das gesamte VoxelAir-Team. Dabei hat jedes Voxel neben professionellem Allroundwissen auch sein ganz spezielles Gebiet, um selbst die individuellsten Kundenwünsche schnell und kompetent umzusetzen.
p>
div>
<ul class="team-person">
<li>li>
<li>li>
<li>li>
<li>li>
ul>
div>
li>
ul>
<ul class="content-point">
<li class="active">li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
section>
div>
body>
html>
js
window.onload=function(){
/*
* 获取元素
* */
//头部
//获取元素:小三角、li集合、up集合、头部主体
var arrows=document.querySelector("#header .header-main .arrows");
var navLis=document.querySelectorAll("#header .header-main .nav ul li");
var upNodes=document.querySelectorAll("#header .header-main .nav ul li .up");
//主体
//定义初始变量index，用于记录显示屏幕的索引，默认值为0
var index=0;
//获取元素：头部、主体、主体的ul列表、主体的所有li的集合、li里的div的集合
var header=document.getElementById("header");
var content=document.getElementById("content");
var contentList=document.querySelector("#content .content-list");
var contentLi=document.querySelectorAll("#content .content-list>li");
var contentDivs=document.querySelectorAll("#content .content-list>li>div");
//第一屏
//获取元素：home-list中的li、所有小圆点
var homeLi=document.querySelectorAll("#content .content-list .home .home-list>li");
var homeIcon=document.querySelectorAll("#content .content-list .home .home-icon>li");
//第二屏
//第三屏
//第四屏
//获取元素：第四屏图片的ul
var aboutULs=document.querySelectorAll("#content .content-list .about .about-img>.item>ul");
//第五屏
//获取元素：第五屏图片的ul、ul下的li集合
var teamPerson=document.querySelector("#content .content-list .team .team-person");
var teamLis=document.querySelectorAll("#content .content-list .team .team-person>li");
//侧边导航
//获取元素：侧边所有小圆点
var contentPoints=document.querySelectorAll("#content .content-point>li");
//出入场动画
//定义变量inIndex，用于记录上一次入场屏幕的索引，初始值为0
var lastIn=0;
//创建数组，用于容纳所有屏幕的出入场动画的函数
var animatinArr=[
//第一屏
{
//入场动画函数
inAni:function(){
//获取元素：home-list和home-icon
var homeList=document.querySelector("#content .content-list .home .home-list");
var homeIcon=document.querySelector("#content .content-list .home .home-icon");
//入场
homeList.style.transform="translateY(0px)";
homeList.style.opacity="1";
homeIcon.style.transform="translateY(0px)";
homeIcon.style.opacity="1";
},
//出场动画函数
outAni:function(){
//获取元素：home-list和home-icon
var homeList=document.querySelector("#content .content-list .home .home-list");
var homeIcon=document.querySelector("#content .content-list .home .home-icon");
//出场
homeList.style.transform="translateY(-200px)";
homeList.style.opacity="0";
homeIcon.style.transform="translateY(200px)";
homeIcon.style.opacity="0";
}
},
//第二屏
{
//入场动画函数
inAni:function(){
//获取元素：三个飞机
var plane1=document.querySelector("#content .content-list .course .plane1");
var plane2=document.querySelector("#content .content-list .course .plane2");
var plane3=document.querySelector("#content .content-list .course .plane3");
//入场
plane1.style.transform="translate(0px,0px)";
plane2.style.transform="translate(0px,0px)";
plane3.style.transform="translate(0px,0px)";
},
//出场动画函数
outAni:function(){
//获取元素：三个飞机
var plane1=document.querySelector("#content .content-list .course .plane1");
var plane2=document.querySelector("#content .content-list .course .plane2");
var plane3=document.querySelector("#content .content-list .course .plane3");
//出场
plane1.style.transform="translate(-200px,-200px)";//左上
plane2.style.transform="translate(-200px,200px)";//左下
plane3.style.transform="translate(200px,-200px)";//右上
}
},
//第三屏
{
//入场函数
inAni:function(){
//获取元素：三支笔
var pencel1=document.querySelector("#content .content-list .works .pencel1");
var pencel2=document.querySelector("#content .content-list .works .pencel2");
var pencel3=document.querySelector("#content .content-list .works .pencel3");
//入场
pencel1.style.transform="translateY(0px)";
pencel2.style.transform="translateY(0px)";
pencel3.style.transform="translateY(0px)";
},
//出场函数
outAni:function(){
//获取元素：三支笔
var pencel1=document.querySelector("#content .content-list .works .pencel1");
var pencel2=document.querySelector("#content .content-list .works .pencel2");
var pencel3=document.querySelector("#content .content-list .works .pencel3");
//出场
pencel1.style.transform="translateY(-200px)";
pencel2.style.transform="translateY(200px)";
pencel3.style.transform="translateY(200px)";
}
},
//第四屏
{
//入场函数
inAni:function(){
//获取元素：两个图片
var img1=document.querySelector("#content .content-list .about .about-img>.item:first-child");
var img2=document.querySelector("#content .content-list .about .about-img>.item:last-child");
//入场
img1.style.transform="rotate(0deg)";
img2.style.transform="rotate(0deg)";
},
//出场函数
outAni:function(){
//获取元素：两个图片
var img1=document.querySelector("#content .content-list .about .about-img>.item:first-child");
var img2=document.querySelector("#content .content-list .about .about-img>.item:last-child");
//出场
img1.style.transform="rotate(45deg)";
img2.style.transform="rotate(-45deg)";
}
},
//第五屏
{
//入场函数
inAni:function(){
//获取元素：标题和文本
var title=document.querySelector("#content .content-list .team .team-title");
var text=document.querySelector("#content .content-list .team .team-text");
//入场
title.style.transform="translateX(0px)";
text.style.transform="translateX(0px)";
},
//出场函数
outAni:function(){
//获取元素：标题和文本
var title=document.querySelector("#content .content-list .team .team-title");
var text=document.querySelector("#content .content-list .team .team-text");
//出场
title.style.transform="translateX(-200px)";
text.style.transform="translateX(200px)";
}
}
];
//出入场动画（测试）
//测试
/*setTimeout(function(){
animatinArr[3]["outAni"]();
},4000);
setTimeout(function(){
animatinArr[3]["inAni"]();
},7000);*/
//开机动画
//获取元素：mask-top、mask-bottom、mask-line、mask
var maskTop=document.querySelector("#mask .mask-top");
var maskBottom=document.querySelector("#mask .mask-bottom");
var maskLine=document.querySelector("#mask .mask-line");
var mask=document.getElementById("mask");
//音频
//获取元素：音频容器music、音频元素myAudio
var music=document.querySelector("#header .header-main .music");
var myAudio=document.querySelector("#header .header-main .music>audio");
/*
* 音频
* */
music.onclick = function () {
if(myAudio.paused){
myAudio.play();
music.style.backgroundImage = 'url("./img/musicon.gif")'
}else {
myAudio.pause();
music.style.backgroundImage = 'url("./img/musicoff.gif")'
}
}
/*
* 出入场动画
* */
function inAndOut(){
//初始化，所有屏幕都处于出场状态上
for(var i=0;i<animatinArr.length;i++){
animatinArr[i]["outAni"]();
}
}
inAndOut();
/*
* 开机动画
* 一个网页中最耗时的加载项是图片资源的加载，可以根据网页中所有图片加载进度来模拟整个网页的加载进度
* 当网页中的所有图片全部加载完成，可以近似于整个网页加载完成
* 通过这个方法可以模拟页面加载进度条的动画
* */
function loading(){
//定义标识变量记录加载完成的图片张数
var imgFlag=0;
//创建数组记录网页中的所有图片的路径
var arr = ['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'];
for(var i=0;i<arr.length;i++){
//创建图片对象
var imgNode=new Image();
imgNode.src="./img/"+arr[i];//注意图片路径
//为每个图片对象绑定onload事件
imgNode.onload=function(){
imgFlag++;
//修改maskLine的宽度
//当imgFlag与arr.length的比值代表图片加载进度，此时设置maskLine的宽度为imgFlag与arr.length比值的百分比
maskLine.style.width=imgFlag*100/arr.length+"%";
}
}
//当过渡执行完成，
// transitionend事件，在过渡执行完成后，执行回调函数，只能通过addEventListener()绑定transitionend事件
//当有多个样式执行过渡时，transitionend事件的回调函数会根据执行过渡的样式的个数来执行多次
maskLine.addEventListener("transitionend",function(){
maskTop.style.height=0+"px";
maskBottom.style.height=0+"px";
maskLine.style.display="none";
});
//当整个开机动画执行完成
maskTop.addEventListener("transitionend",function(){
//执行第一屏入场动画
animatinArr[0]["inAni"]();
//第一屏3d轮播
home3D();
//删除mask
//如果不删除mask遮罩层，将会无法触发其余屏幕的点击事件，因为mask固定定位于视口上将其余屏幕全部盖住了
mask.remove();
//播放音频
myAudio.onloadedmetadata = function () {
music.onclick();
}
//音频自动播放
myAudio.play();
});
}
loading();
/*
* 头部
* */
function headerBind(){
//第一个up默认宽度为100%
upNodes[0].style.width="100%";
//初始化小三角的位置
arrows.style.left=navLis[0].offsetLeft+navLis[0].offsetWidth/2-arrows.offsetWidth/2+"px";
//为每个li绑定click事件
for(var i=0;i<navLis.length;i++){
//为每个li添加index属性
navLis[i].index=i;
//为每个li绑定事click件
navLis[i].onclick=function(){
/*//修改up
//遍历所有up
for(var i=0;i
//修改index值
index=this.index;
//屏幕滑动
move(index);
}
}
}
headerBind();
/*
* 主体
* */
//定义变量表示主体高度
var cHeight=document.documentElement.clientHeight-header.offsetHeight;
function contentBind(){
//设置content的高度
content.style.height=cHeight+"px";
//设置所有li的高度
//遍历li集合
for(var i=0;i<contentLi.length;i++){
//设置每个li的高度
contentLi[i].style.height=cHeight+"px";
}
//绑定鼠标滚轮事件
//创建滚轮降频定时器，默认为null
var timer=null;
//ie浏览器和其他浏览器
document.onmousewheel=function(event){
//清除降频定时器
clearTimeout(timer);
//启用降频定时器
timer=setTimeout(function(){
//调用滚轮响应函数
fun(event);
},100);
};
//火狐浏览器
if(document.addEventListener){
document.addEventListener("DOMMouseScroll",function(event){
//清除降频定时器
clearTimeout(timer);
//启用降频定时器
timer=setTimeout(function(){
//调用滚轮响应函数
fun(event);
},100)
},false);
}
}
contentBind();
//定义鼠标滚动事件的响应函数
function fun(event){
event=event || window.event;
//定义标识变量代表鼠标滚动方向
var flag;
/*if(event.wheelDelta){
if(event.wheelDelta>0){
//ie和其他浏览器中wheelDelta表示滚动方向，大于0为向上
//向上滚动
flag="up";
}else{
flag="down";
}
}else if(event.detail){
if(event.detail<0){
//火狐中detail表示滚动方向，小于0为向上
//向上滚动
flag="up";
}else {
flag="down";
}
}*/
if(event.wheelDelta>0||event.detail<0){
//向上滚动
flag="up";
}else{
//向下滚动
flag="down";
}
switch (flag){
case "up":
//向上滚动
if(index>0){
index--;
}
//调用屏幕滑动函数，传参
move(index);
break;
case "down":
//向下滚动
if(index<contentLi.length-1){
index++;
}
//调用屏幕滑动函数，传参
move(index);
break;
}
//取消浏览器滚动的默认行为
//先判断是否是火狐浏览器，火狐浏览器的滚轮事件是用addEventListener()方法添加的，取消默认事件要调用preventDefault()方法
event.preventDefault && event.preventDefault();
//其他浏览器是直接绑定的onmousewheel事件，可以直接return false取消默认事件
return false;
}
//创建屏幕滑动的函数
function move(index){
//修改up宽度
//遍历所有up，使所有up宽度为0
for(var i=0;i<upNodes.length;i++){
upNodes[i].style.width="";
}
//修改相应index的up宽度为100%
upNodes[index].style.width="100%";
//修改侧边导航点
//遍历所有导航点，清除所有导航点的active类
for(var j=0;j<contentPoints.length;j++){
contentPoints[j].className="";
}
//为相应index的导航点添加active类
contentPoints[index].className="active";
//修改小三角位置
arrows.style.left=navLis[index].offsetLeft+navLis[index].offsetWidth/2-arrows.offsetWidth/2+"px";
//屏幕滑动
contentList.style.top=-index*cHeight+"px";
//将上一次入场的页面执行出场动画切换为出场状态
animatinArr[lastIn]["outAni"]();
//当前页面执行入场动画
animatinArr[index]["inAni"]();
//更新inIndex的值
lastIn=index;
}
/*
* 视口改变
* */
window.onresize=function(){
//更新cHeight的值
cHeight=document.documentElement.clientHeight-header.offsetHeight;
//重新计算content的高度
content.style.height=document.documentElement.clientHeight-header.offsetHeight+"px";
//重新设置li的高度
contentBind();
//更新屏幕滑动距离
move(index);
}
/*
* 侧边导航
* */
function navBind(){
//为每个导航点绑定click事件
//遍历所有导航点
for(var i=0;i<contentPoints.length;i++){
//为每个导航点添加index属性
contentPoints[i].index=i;
//为每个导航点绑定click事件
contentPoints[i].onclick=function (){
/*//修改up
//遍历所有up
for(var j=0;j
//修改index值
index=this.index;
//屏幕滑动
move(index);
}
}
}
navBind();
/*
* 第一屏
* */
//创建第一屏轮播函数home3D，实现功能：点击轮播、自动轮播
//定义变量表示上一次显示li的索引oldIndex，初始值为0
var oldIndex=0;
//定义变量表示轮播时上一次显示li的索引autoIndex，初始值为0
var autoIndex=0;
//创建轮播定时器
var homeTimer=null;
function home3D(){
//遍历所有小圆点，为每个小圆点绑定单击事件
for(var i=0;i<homeIcon.length;i++){
//为每个小圆点添加index属性
homeIcon[i].index=i;
//为每个小圆点绑定click事件
homeIcon[i].onclick=function(){
//关闭轮播定时器
clearInterval(homeTimer);
//清除所有小圆点的active类
//遍历所有小圆点
for(var j=0;j<homeIcon.length;j++){
//清除所有小圆点的active类
homeIcon[j].className="";
}
//为当前小圆点添加active类
homeIcon[this.index].className="active";
//判断切换方向，执行动画
if(oldIndex<this.index){
//向后切换：左边隐藏，右边显示
//为前一个li添加leftHide类
homeLi[oldIndex].className="leftHide";
//为当前li添加rightShow类
homeLi[this.index].className="rightShow";
}else if(oldIndex>this.index){
//向前切换：左边显示，右边隐藏
//为前一个li添加leftShow类
homeLi[oldIndex].className="rightHide";
//为当前li添加righHide类
homeLi[this.index].className="leftShow";
}
//修改oldIndex值
oldIndex=this.index;
//修改autoIndex的值
autoIndex=this.index;
//调用homeChange函数重新开启轮播定时器
homeChange();
}
}
//自动轮播
homeChange();
}
//创建自动轮播的函数homeChange
function homeChange(){
//为轮播定时器赋值
homeTimer=setInterval(function(){
//修改要显示的li的索引值
autoIndex++;
//索引越界
if(autoIndex==homeLi.length){
autoIndex=0;
}
//一直向后翻页：上一次显示的li隐藏，显示要显示的li
//为上一次显示的li添加类leftHide
homeLi[oldIndex].className="leftHide";
//为要显示的li添加类rightShow
homeLi[autoIndex].className="rightShow";
//更新小圆点
//清除所有小圆点的active类
//遍历所有小圆点
for(var i=0;i<homeIcon.length;i++){
//清除所有小圆点的active类
homeIcon[i].className="";
}
//为当前要显示的小圆点添加active类
homeIcon[autoIndex].className="active";
//修改oldIndex值
oldIndex=autoIndex;
},4000);
}
/*
* 第二屏
* */
/*
* 第三屏
* */
//进入第三屏
// move(2);
/*
* 第四屏
* */
//图片炸裂
function picBoom(){
for(var i=0;i<aboutULs.length;i++){
//改变图片
changeImg(aboutULs[i]);
}
}
picBoom();
//创建图片改变函数changeImg
function changeImg(ul){
//获取li的宽高
var w=ul.offsetWidth/2;
var h=ul.offsetHeight/2;
//获取ul的data-src属性
var imgSrc=ul.dataset.src;//"./img/about1.jpg"
//创建li和img
for(var i=0;i<4;i++){
//创建li
var liNode=document.createElement("li");
liNode.style.width=w+"px";
liNode.style.height=h+"px";
//创建img
// var imgNode=new Image();
var imgNode=document.createElement("img");
//设置图片路径
imgNode.src=imgSrc;
//图片定位
imgNode.style.top=-Math.floor(i/2)*h+"px";//Math.floor()向下取整，i=0,1的图片top=0，i=2,3的图片top=-h；
imgNode.style.left=-(i%2)*w+"px";//%2取余，i=0,2的图片left=0，i=1,3的图片left=-w；
//节点拼装
liNode.appendChild(imgNode);
ul.appendChild(liNode);
}
//获取li中的图片
var imgNodes=ul.querySelectorAll("img");
//为ul绑定鼠标移入/移出事件
ul.onmouseenter=function(){
imgNodes[0].style.top=h+"px";
imgNodes[1].style.left=-2*w+"px";
imgNodes[2].style.left=w+"px";
imgNodes[3].style.top=-2*h+"px"
}
ul.onmouseleave=function(){
imgNodes[0].style.top=0+"px";
imgNodes[1].style.left=-w+"px";
imgNodes[2].style.left=0+"px";
imgNodes[3].style.top=-h+"px"
}
}
/*
* 第五屏
* */
//第五屏
canvasAin();
function canvasAin() {
var myCanvas= null;
var timer1 = null;
var timer2 = null;
teamPerson.onmouseleave = function () {
//修改透明度
for (var j = 0; j < teamLis.length; j++) {
teamLis[j].style.opacity = '1';
};
//移除canvas
removeCanvas();
}
for (var i = 0; i < teamLis.length; i++) {
teamLis[i].onmouseenter = function () {
for (var j = 0; j < teamLis.length; j++) {
teamLis[j].style.opacity = '0.5';
};
this.style.opacity = '1';
//添加canvas
addCanvas();
//确定canvas位置
myCanvas.style.left = this.offsetLeft + 'px';
}
}
//移除canvas
function removeCanvas() {
clearInterval(timer1)
clearInterval(timer2)
myCanvas.remove();
myCanvas = null;
}
//添加canvas
function addCanvas() {
if(!myCanvas){
myCanvas = document.createElement('canvas');
myCanvas.width = teamLis[0].offsetWidth;
myCanvas.height = 310;
//向ul中拼装节点
teamPerson.appendChild(myCanvas)
//气泡
qiPao();
}
}
function qiPao() {
var painting = myCanvas.getContext('2d');
//保存圆的数据信息 （x,y,r）
var arr = [];
timer1 = setInterval(function () {
painting.clearRect(0,0,myCanvas.width,myCanvas.height);
//数据处理
for (var j = 0; j < arr.length; j++) {
arr[j].deg +=3;
arr[j].x = arr[j].startX + Math.sin(arr[j].deg*Math.PI/180)*arr[j].scale/2;
arr[j].y = arr[j].startY - (arr[j].deg*Math.PI/180)*arr[j].scale*0.75;
if(arr[j].y < 30){
arr.splice(j,1)
}
}
//绘制圆形
for (var i = 0; i < arr.length; i++) {
painting.beginPath();
painting.fillStyle = 'rgba('+ arr[i].red +','+ arr[i].green +','+ arr[i].blue +','+ arr[i].a +')';
painting.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
painting.fill();
}
},10);
//每个500ms输出信息
timer2 = setInterval(function () {
//半径，圆心
var r = Math.floor(Math.random()*8)+2;
var x = Math.floor(Math.random()*myCanvas.width) ;
var y = myCanvas.height + r ;
//颜色
var red = Math.floor(Math.random()*255) ;
var green = Math.floor(Math.random()*255) ;
var blue = Math.floor(Math.random()*255) ;
var a = 1;
//曲线运动
var startX = x;
var startY = y;
var deg = 0;
var scale = Math.floor(Math.random()*30)+30 ;
arr.push({
x:x,
y:y,
r:r,
red:red,
green:green,
blue:blue,
a:a,
startX:startX,
startY:startY,
deg:deg,
scale:scale
})
},100);
}
}
}
开机遮罩层样式
/*
开机遮罩层
*/
#mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
#mask .mask-top,
#mask .mask-bottom{
position: absolute;
left: 0;
width: 100%;
height: 50%;
background-color: #009ee0;
transition: 1s height;
}
#mask .mask-top{
top: 0;
}
#mask .mask-bottom{
bottom: 0;
}
#mask .mask-line{
position: absolute;
top: 50%;
height: 4px;
margin-top: -2px;
width: 0;
background-color: #fff;
transition: 1s width;
}
头部css
/*
头部
*/
#header{
width: 100%;
height: 80px;
}
#header .header-main{
position: relative;
width: 1100px;
margin: 0 auto;
height: 100%;
/*background-color: #b3c7cd;*/
}
#header .header-main .logo{
float: left;
margin-top: 15px;
}
#header .header-main .logo>a{
display: block;
}
#header .header-main .music{
float: left;
width:14px;
height:14px;
margin:50px 0 0 5px;
cursor: pointer;
background-image: url("../img/musicon.gif");
}
#header .header-main .nav{
float: right;
margin-top: 50px;
}
#header .header-main .nav ul li{
position: relative;
float: left;
margin-left: 40px;
}
#header .header-main .nav ul li .up{
position: absolute;
top: 0;
left: 0;
color: #000;
width: 0;
overflow: hidden;
transition: 1s width;
}
#header .header-main .nav ul li:hover .up{
width: 100%;
}
#header .header-main .arrows{
position: absolute;
left: 50%;
bottom: -11px;
background-image: url("../img/arrow.png");
background-repeat: no-repeat;
width: 21px;
height: 11px;
transition: 1s left;
z-index: 9;
}
主体样式
/*
主体
*/
#content{
position: relative;
width: 100%;
background-color: pink;
overflow: hidden;
}
#content .content-list{
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: 1s top;
}
#content .content-list>li{
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
#content .content-list>li:nth-child(1){
background-image: url("../img/bg1.jpg");
}
#content .content-list>li:nth-child(2){
background-image: url("../img/bg2.jpg");
}
#content .content-list>li:nth-child(3){
background-image: url("../img/bg3.jpg");
}
#content .content-list>li:nth-child(4){
background-image: url("../img/bg4.jpg");
}
#content .content-list>li:nth-child(5){
background-image: url("../img/bg5.jpg");
}
#content .content-list>li>div{
position: absolute;
width: 1100px;
height: 520px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/*background-color: rgba(255,255,255,0.4);*/
}
侧边导航点
/*
侧边导航点
*/
#content .content-point{
position: fixed;
top: 50%;
right: 10px;
}
#content .content-point>li{
width: 15px;
height: 15px;
border-radius: 50%;
border: solid 1px #fff;
margin-top: 10px;
cursor: pointer;
}
#content .content-point>li.active{
background-color: white;
}
第一屏
/*
第一屏
*/
#content .content-list .home .home-list{
width: 100%;
height: 100%;
/*设置视距*/
perspective: 1000px;
/*开启3D效果*/
transform-style: preserve-3d;
transition: 2s;
}
#content .content-list .home .home-list>li{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
}
#content .content-list .home .home-list>li.active{
visibility: visible;
}
/*点击右侧小圆点，向后翻页：左侧隐藏、右侧显示*/
#content .content-list .home .home-list>li.leftHide{
animation: leftH 2s linear;
visibility: hidden;
}
#content .content-list .home .home-list>li.rightShow{
animation: rightS 2s linear;
visibility: visible;
}
@keyframes leftH {
0%{
visibility: visible;
}
50%{
transform: translate(-40%,0) rotateY(30deg) scale(0.7);
}
100%{
transform: translateZ(-200px);
}
}
@keyframes rightS {
0%{
visibility: hidden;
transform: translateZ(-200px);
}
50%{
transform: translate(40%,0) rotateY(-30deg) scale(0.7);
}
100%{
}
}
/*点击左侧小圆点，向前翻页：右侧隐藏，左侧显示*/
#content .content-list .home .home-list>li.leftShow{
animation: leftS 2s linear;
visibility: visible;
}
#content .content-list .home .home-list>li.rightHide{
animation: rightH 2s linear;
visibility: hidden;
}
@keyframes leftS {
0%{
visibility: hidden;
transform: translateZ(-200px) ;
}
50%{
transform: translate(-40%,0) rotateY(30deg) scale(0.7);
}
100%{
}
}
@keyframes rightH {
0%{
visibility: visible;
}
50%{
transform: translate(40%) rotateY(-30deg) scale(0.7);
}
100%{
transform: translateZ(-200px);
}
}
#content .content-list .home .home-list>li:nth-child(1){
background-color: #dc6c5f;
}
#content .content-list .home .home-list>li:nth-child(2){
background-color: #95dc84;
}
#content .content-list .home .home-list>li:nth-child(3){
background-color: #64b9d2;
}
#content .content-list .home .home-list>li:nth-child(4){
background-color: #000000;
}
#content .content-list .home .home-list>li>div{
width: 100%;
height: 100%;
text-align: center;
color: white;
line-height: 520px;
}
#content .content-list .home .home-icon{
position: absolute;
/*left: 50%;
transform: translateX(-50%);*/
left: 0;
right: 0;
width: 120px;
margin: auto;
bottom: 0;
transition: 2s;
}
#content .content-list .home .home-icon>li{
cursor: pointer;/*设置鼠标hover时的指针样式*/
float: left;
width: 20px;
height: 20px;
margin: 2px;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
box-shadow: 0 0 4px rgba(25,25,25,0.8);
}
#content .content-list .home .home-icon>li.active{
background-color: rgba(255,255,255,1);
}
第二屏
/*
第二屏
*/
#content .content-list .course .course-title{
margin: 50px;
}
#content .content-list .course .course-text{
position: relative;
width: 400px;
margin-left: 50px;
z-index: 1;
}
#content .content-list .course .course-list{
position: absolute;
z-index: 1;
right: 50px;
top: 70px;
width: 480px;
}
#content .content-list .course .course-list>.item{
position: relative;
width: 120px;
height: 132px;
float: left;
/*开启item的3d效果*/
perspective: 1000px;/*为item设置视距，使inner的3d变形更加立体*/
transform-style: preserve-3d;/*设置3d变形*/
}
#content .content-list .course .course-list>.item>.inner{
width: 100%;
height: 100%;
transition: 2s transform;
perspective: 1000px;/*设置视距*/
transform-style: preserve-3d;/*设置inner的3d变形，以显示背面*/
}
#content .content-list .course .course-list>.item:hover>.inner{
transform: rotateY(180deg);
}
#content .content-list .course .course-list>.item>.inner>.front{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/*width: 100%;
height: 100%;*/
background-image: url("../img/pcwelt.png");
background-repeat: no-repeat;
background-position: center;
backface-visibility: hidden;/*设置元素背面不可见*/
}
#content .content-list .course .course-list>.item>.inner>.back{
width: 100%;
height: 100%;
box-sizing: border-box;/*设置width和height的作用大小*/
background-color: #009ee0;
padding: 15px;
transform: rotateY(180deg);
backface-visibility: hidden;/*设置元素背面不可见*/
}
#content .content-list .course .course-list>.line{
position: absolute;
top: -5px;
left: 0;
width: 9px;
height: 410px;
background-image: url("../img/plus_row.png");
}
#content .content-list .course .course-list>.line:nth-child(1){
left: -6px;
}
#content .content-list .course .course-list>.line:nth-child(2){
left: 114px;
}
#content .content-list .course .course-list>.line:nth-child(3){
left: 234px;
}
#content .content-list .course .course-list>.line:nth-child(4){
left: 354px;
}
#content .content-list .course .course-list>.line:nth-child(5){
left: 474px;
}
#content .content-list .course .plane1{ width:359px; height:283px; background:url("../img/plane1.png") no-repeat; position:absolute; left:300px; top:-100px; transition:1s;}
#content .content-list .course .plane2{ width:309px; height:249px; background:url("../img/plane2.png") no-repeat; position:absolute; left:-100px; top:200px; transition:1s;}
#content .content-list .course .plane3{ width:230px; height:182px; background:url("../img/plane3.png") no-repeat; position:absolute; left:300px; top:400px; transition:1s;}
第三屏
/*
第三屏
*/
#content .content-list .works .works-title{
margin: 50px 0 100px 50px;
}
#content .content-list .works .works-img{
position: relative;
z-index: 1;
margin-left: 50px;
}
#content .content-list .works .works-img>li{
position: relative;
float: left;
width: 220px;
height: 133px;
overflow: hidden;
margin: 0 1px;
}
#content .content-list .works .works-img>li:last-child{
width: 332px;
}
#content .content-list .works .works-img>li>img{
transition: 1s transform;
}
#content .content-list .works .works-img>li>.mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(25,25,25,0.8);
color: white;
opacity: 0;
transition: 1s opacity;
}
#content .content-list .works .works-img>li:hover>img{
transform: rotate(10deg) scale(1.5);
}
#content .content-list .works .works-img>li:hover>.mask{
opacity: 0.8;
}
#content .content-list .works .works-img>li>.mask>span{
display: block;
padding: 10px;
}
#content .content-list .works .works-img>li>.mask>.icon{
width: 32px;
height: 34px;
margin: 10px auto 0;
background-image: url("../img/zoomico.png");
background-repeat: no-repeat;
background-position: 0 0;
transition: 1s background-position;
}
#content .content-list .works .works-img>li:hover>.mask>.icon{
background-position: 0 -35px;
}
#content .content-list .works .works-robot{
position: absolute;
z-index: 1;
left: 900px;
top: 170px;
width: 167px;
height: 191px;
background-image: url("../img/robot.png");
background-repeat: no-repeat;
animation: robotMove 6s linear infinite forwards;
}
@keyframes robotMove {
0%{
transform: rotateY(0deg);
}
49.9%{
transform: rotateY(0deg);
}
50%{
left: 0;
transform: rotateY(180deg);
}
100%{
transform: rotateY(180deg);
}
}
#content .content-list .works .pencel1{ width:180px; height:97px; background:url("../img/pencel1.png") no-repeat; position:absolute; transition:1s; left:500px; top:0;}
#content .content-list .works .pencel2{ width:268px; height:38px; background:url("../img/pencel2.png") no-repeat; position:absolute; transition:1s; left:300px; top:250px;}
#content .content-list .works .pencel3{ width:441px; height:231px; background:url("../img/pencel3.png") no-repeat; position:absolute; transition:1s; left:650px; top:300px;}
第四屏
/*
第四屏
*/
#content .content-list .about .about-title{
margin: 50px 0 100px 50px;
}
#content .content-list .about .about-text{
width: 400px;
margin-left: 50px;
}
#content .content-list .about .about-img{
}
#content .content-list .about .about-img>.item{
position: absolute;
width: 260px;
height: 200px;
border: solid 5px rgba(255,255,255,0.5);
border-radius: 8px;
transition: 2s;
}
#content .content-list .about .about-img>.item:first-child{
left: 750px;
top: 50px;
}
#content .content-list .about .about-img>.item:last-child{
left: 600px;
top: 290px;
}
#content .content-list .about .about-img>.item>span,
#content .content-list .about .about-img>.item>ul{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#content .content-list .about .about-img>.item:first-child>span{
background-image: url("../img/about2.jpg");
background-repeat: no-repeat;
}
#content .content-list .about .about-img>.item:last-child>span{
background-image: url("../img/about4.jpg");
background-repeat: no-repeat;
}
#content .content-list .about .about-img>.item>ul>li{
float: left;
overflow: hidden;
position: relative;
}
#content .content-list .about .about-img>.item>ul>li>img{
position: absolute;
/*设置初始值*/
top: 0;
left: 0;
transition: 1s;
}
第五屏
/*
第五屏
*/
#content .content-list .team .team-title{
margin: 50px;
width: 400px;
float: left;
transition: 2s;
}
#content .content-list .team .team-text{
margin: 50px;
width: 400px;
float: right;
transition: 2s;
}
#content .content-list .team .team-person{
position: absolute;
top: 230px;
left: 0;
right: 0;
margin: auto;
width: 944px;
height: 448px;
/*background-color: white;*/
}
#content .content-list .team .team-person>li{
width: 236px;
height: 100%;
float: left;
background-image: url("../img/team.png");
background-repeat: no-repeat;
}
#content .content-list .team .team-person>li:nth-child(1){
background-position: 3px 0;
}
#content .content-list .team .team-person>li:nth-child(2){
background-position: -230px 0px;
}
#content .content-list .team .team-person>li:nth-child(3){
background-position: -483px 0px;
}
#content .content-list .team .team-person>li:nth-child(4){
background-position: -710px 0px;
}
#content .content-list .team .team-person canvas{
/*background: pink;*/
position: absolute;
left:0;
top: 0;
}