HTML5+CSS3实现动态网页

移动端适配

设计稿里有rem单位的，所以我直接用的rem+媒体查询

做较复杂动画首先需在html文件中引用js文件
js文件中
var screenAnimateElements = {
	'.screen-1':[
		'.screen-1__heading',
		'.screen-1__phone',
		'.screen-1__shadow',
	]
};

function setScreenAnimate(screenCls){
	var screen = document.querySelector(screenCls); //获取当前屏元素
	var animateElements = screenAnimateElements[ScreenCls];
	var isSetAnimateClass = false;
	var isAnimateDone = false;
screen.onclick = function{
	if(isSetAnimateClass === false){
		for(var i=0;i<animateElements.length;i++){
			var element = document.querySelector(animateElements[i]);
			var baseCls = element.getAttribute('class');
			//getAttribute() 方法返回指定属性名的属性值
			element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init')
			//更改div class名
			//substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。 题中从下标1到结尾都取
		}
		isSetAnimateClass = true;
		return;
	}
	if(isAnimateDone === false){
		for(var i=0;i<animateElements.length;i++){
			var element = document.querySelector(animateElements[i]);
			var baseCls = element.getAttribute('class');
			element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
		}
		isSetAnimatDone = true;
		return;
	}
	if(isAnimateDone === true){
		for(var i=0;i<animateElements.length;i++){
			var element = document.querySelector(animateElements[i]);
			var baseCls = element.getAttribute('class');
			element.setAttribute('class',baseCls.replace('_animate_done','_animate_init'));
		}
		isSetAnimatDone = false;
		return;
	}
}
}
for (k in screenAnimateElements){
	setScreenAnimate (k);
}


还可以把很多样式放在一起
.screen-1__shadow,
.screen-1__phone,
.screen-1__heading{
	三个样式合在一起
}

循环动画：帧动画
即鼠标下拉到不同的div块时顶部导航栏变颜色 并且对应的字样式变红

JS动画&交互

获取DOM元素
document.querySelector(selector)
获得所有元素
document.querySelectorAll(selector)
获取样式
element.getAttribute('class',cls);
设置样式
element.setAttribute('class',cls);
窗口载入
window.onload = function(){ }
窗口滚动
window.onscroll = function(){ }
点击处理
elem.onclick = function(){ }
滚动条高度获取
document.body.scrollTop

CSS3新特性：
.class:first-child{
第一个元素的样式
}

获取元素(封装)
var getElem = function(selector){
	return document.querySelector(selector);
}
var getAllElem = function(selector){
	return document.querySelectorAll(selector);
}
获取元素样式
var getCls = function(element){
	return element.getAttribute('class');
}
设置元素样式 
其实原理都是通过改变className改变样式
var setCls = function(element,cls){
	return element.setAttribute('class', cls);
}

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。找不到返回-1

为元素添加样式
var addCls = function( element , cls ){
	var baseCls = getCls(element);
	if( baseCls.indexOf(cls) === -1){
		setCls( element , baseCls+' '+cls);//不要忘记空格符
	}
}

split以括号里的内容把字符串分割开（不包括括号里的内容）
join往数组里加入分隔符

为元素删除样式
var delCls = function( element , cls){
	var baseCls = getCls(element);
	if( baseCls.indexOf(cls) != -1){
		setCls( element , baseCls.split(cls).join(' ').replace(/\s+/g,' ');//不要忘记空格符
	}
}

例：
var arr = "Georgeaaa"
document.write(arr.join(' '));
//输出Georgeaaa John Thomasaa
document.write("<br />");//换行
document.write(arr[0].split('aaa').join(' '));
//输出George a

交互动画第一步：
初始化样式 init
var screenAnimateElements = {

};

设置屏内元素为初始状态
var setScreenAnimateInit = function(screenCls){
	var screen = document.querySelector(screenCls); //获取当前屏元素
	var animateElements = screenAnimateElements[ScreenCls];
	for(var i=0;i<animateElements.length;i++){
			var element = document.querySelector(animateElements[i]);
			var baseCls = element.getAttribute('class');
			element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
		}
}

设置屏内元素动画播放
var playScreenAnimateDone = function(screenCls){
	var screen = document.querySelector(screenCls); //获取当前屏元素
	var animateElements = screenAnimateElements[ScreenCls];
	for(var i=0;i<animateElements.length;i++){
			var element = document.querySelector(animateElements[i]);
			var baseCls = element.getAttribute('class');
			//getAttribute() 方法返回指定属性名的属性值
			element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init')
}


window.onload = function(){
	for (k in screenAnimateElements){
		if(k==='.screen-1')continue;//在第一屏初始状态下不要放动画
		setScreenAnimateInit (k);
	}
}

第二步：滚动到哪就播放到哪里
window.onscroll = function(){
	var top = document.body.scrollTop;
	if (top>1){
		playScreenAnimateDone('.screen-1');
		switchNavItemsActive(0);
	}
	...
}
第三步：导航条变化 变成_status_back
.header{
	transition:all 1s;
}
.header_status_back{
	background-color:rgba(0,0,0,.5);
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:3;
}
.header_status_back .header__logo,
.header_status_back .header__nav-item{
	color:#fff;
}

if(top > 80) {
	addClass( getElem('.header'),'header_status_back')
}
else{
	delClass( getElem('.header'),'header_status_back')
	switchNavItemsActive(0)
}

大纲 _status_in 样式
.outline{
	opacity:0;
	transition:all 1s;
	transform:translate(100%,0);
}
.outline_status_in{
	opacity:1;
	transform:translate(0,0);
}

第三步：双向定位
var navItems = getAllElem('.header__nav-item');
var outLineItems = getAllElem('.outline__item');
var setNavJump = function(i,lib){
	var item = lib[i];
	item.onclick = function(){
		console.log(i);//导航第一项为0 第二项为1 .。
		document.body.scrollTop = i*800;
		//点某个导航立刻会跳到该div
	}
}
for(var i=0;i<navItems.length;i++){
	setNavJump(i,navItems)
}
for(var i=0;i<outLineItems.length;i++){
	setNavJump(i,outLineItems)
}
第四步 对应div导航颜色变红
.header_status_back .header__nav-item_status_active{
	color:red;
}

var switchNavItemsActive = function(idx){
	for(var i=-;i<navItems.length;i++){
		delCls( navItems[i] ,'header__nav-item_status_active')
	}
	addCls( navItems[idx] ,'header__nav-item_status_active')
}

outline同理 全部把名字换掉即可

扩展：滑动门特效
导航变换时会滑动到下一个
<div class="header__nav-tip">
</div>

.header__nav-tip{
	position:absolute;
	width:30px;
	height:2px;
	background-color:#000;
	bottom:0;
	left:0;
	transition:all 1s;
	padding-left:40px;
}
var navTip = getElem('.header__nav-tip');
var setTip = function(idx,lib){
	lib[idx].onmouseover = function(){
		console.log(this,idx);
		navTip.style.left = (idx*70) + 'px';
	}
	var activeIdx=0;
	lib[idx].onmouseout = function(){
		for(var i=0;i<lib.length;i++){
			if(getCls(lib[i]).indexOf('header__nav-item_status_active')>-1){
				activeIdx=i;
				break;
			}
			navTip.style.left = (activeIdx*70) + 'px';
		}
	}
}
for(var i=0;i<navItems.length;i++){
	setTip(i,navItems);
}