HTML5+CSS3实现动态网页
做较复杂动画首先需在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);
}