webapi day6
1、scroll
scrollTop：向上卷曲出去的距离
scrollLeft：向左卷曲出去的距离
scollWidth:元素中内容实际的宽
scollHeight:元素中内容实际的高
2、固定导航栏
3、变速动画
4、筋斗云
5、获取元素计算后的样式属性值
6、变速动画函数增加属性
*********增加多个属性********
my$("btn").οnclick=function(){
animate(my$("dv"),{"width":800,"height":400});
}:
var json={"width":800,"height"};
function animate(element(元素),json){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true; //默认全部达到目标
for(var attr in json){ //遍历多个属性多个值
var current=parseInt(getStyle(element,attr));
var target=json[attr]; //当前属性对应的目标值
var step=(target-current)/10;//（目标-当前）/10
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//每次移动后的距离
element.style[attr]=current+"px";
if(current!=target){ //是否到达目标
flag=false;
}
}
if(flag){
clearInterval(element.timeId);
}
//测试代码：console.log("目标位置："+target+"，当前位置："+current+",每次移动步数："+step);
},20);
}
*******回调函数*******执行完动画后执行回调函数
function animate(element(元素),json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true; //默认全部达到目标
for(var attr in json){ //遍历多个属性多个值
var current=parseInt(getStyle(element,attr));
var target=json[attr]; //当前属性对应的目标值
var step=(target-current)/10;//（目标-当前）/10
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//每次移动后的距离
element.style[attr]=current+"px";
if(current!=target){ //是否到达目标
flag=false;
}
}
if(flag){
clearInterval(element.timeId);
if(fn){ //所有属性到达目标才能使用
fn();
}
}
//测试代码：console.log("目标位置："+target+"，当前位置："+current+",每次移动步数："+step);
},20);
}
******透明度和层级******
function animate(element(元素),json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true; //默认全部达到目标
for(var attr in json){ //遍历多个属性多个值
if(attr=="opacity"){ //判断attr中是不是opacity
var current=getStyle(element,attr)*100; //元素当前透明度放大100倍
var target=json[attr]*100; //目标透明度放大100倍
var step=(target-current)/10;//（目标-当前）/10
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current/100;
}else if(attr=="zIndex"){ //判断是不是zIndex
element.style[attr]=json[attr];
}else{ //普通属性
var current=parseInt(getStyle(element,attr));
var target=json[attr]; //当前属性对应的目标值
var step=(target-current)/10;//（目标-当前）/10
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//每次移动后的距离
element.style[attr]=current+"px";
}
if(current!=target){ //是否到达目标
flag=false;
}
}
if(flag){
clearInterval(element.timeId);
if(fn){ //所有属性到达目标才能使用
fn();
}
}
//测试代码：console.log("目标位置："+target+"，当前位置："+current+",每次移动步数："+step);
},20);
}
my$("btn").οnclick=function(){
var json={"width":800,"height":400,"opacity":0.2,};
animate(my$("dv"),json,function(){
animate(my$("dv"),{"width":40,"height":50,"opacity":1,"zIndex":1000});
});
}:
7、手风琴效果
8、旋转木马
(含有动画函数封装)
9、client
clientWidth:可视区域的宽，没有边框，边框内容的宽度
clientHeight:可视区域的高，没有边框，边框内容的高度
clientLeft:左边框宽度
clientTop:上边框宽度