webapi day6

1、scroll

scrollTop：向上卷曲出去的距离

scrollLeft：向左卷曲出去的距离

scollWidth:元素中内容实际的宽

scollHeight:元素中内容实际的高

2、固定导航栏

扫描二维码关注公众号，回复： 3567747 查看本文章

function getScroll(){

return{

obj.left:window.pageXOffset||document.documentElement.scrollLeft||socument.body.scrollLeft||0,

obj.top:window.pageYOffset||document.documentElement.scrollTop||socument.body.scrollTop||0

return obj;

};

}

window.onscroll=function(){

if(getScroll().top>=my$("topPart").offsetHeight){

my$("navBar").className="nav fixed";

my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px";

}else{

my$("navBar").className="nav";

my$("mainPart").style.marginTop="10px";

}

};

</script>

3、变速动画

my$("btn1").onclick=function(){

animate(my$("dv"),400);

};

my$("btn2").onclick=function(){

animate(my$("dv"),800);

};

function animate(element,target){ //动画函数--任意一个元素移动到指定目标位置

clearInterval(element.timeId);//先清理定时器

element.timeId=setInterval(function(){

var current=element.offsetLeft;//div当前位置

var step=(target-current)/10;//（目标-当前）/10

step=step>0?Math.ceil(step):Math.floor(step);

step=current<target?step:-step;//向左或向右

current+=step;//每次移动后的距离

element.style.left=current+"px";

if(current==target){

clearInterval(element.timeId);

}

//测试代码：console.log("目标位置："+target+"，当前位置："+current+",每次移动步数："+step);

},20);

}

</script>

4、筋斗云

</ul>

</div>

function animate(element,target){ //动画函数--任意一个元素移动到指定目标位置

clearInterval(element.timeId);//先清理定时器

element.timeId=setInterval(function(){

var current=element.offsetLeft;//div当前位置

var step=(target-current)/10;//（目标-当前）/10

step=step>0?Math.ceil(step):Math.floor(step);

current+=step;//每次移动后的距离

element.style.left=current+"px";

if(current==target){

clearInterval(element.timeId);

}

//测试代码：console.log("目标位置："+target+"，当前位置："+current+",每次移动步数："+step);

},20);

}

var cloud=my$("cloud");

var list=my$("navBar").children;

for(i=0;i<list.length;i++){

list[i].onmouseover=mouseoverHandle;

list[i].onclick=clickHandle;

list[i].onmouseout=mouseoutHandle;

}

function mouseoverHandle(){ //进入

//移动到鼠标此次进入的li的位置

animate(cloud,this.offsetLeft);

}

//点击的时候，记录上一次位置

var lastPosition=0;

function clickHandle(){ //点击

lastPosition=this.offsetLeft;

}

function mouseoutHandle(){ //离开

animate(cloud,lastPosition);

}

</script>

5、获取元素计算后的样式属性值

function getStyle(element,attr){

return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];

}

my$("btn").onclick=function(){

console.log(getStyle(my$("dv"),"top")); //测试

};

</script>

6、变速动画函数增加属性

my$("btn1").onclick=function(){

animate(my$("dv"),"width",200);

function getStyle(element,attr){ //获取任意一个元素的任意一个属性的当前值

return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;

}

};

function animate(element(元素),attr(属性名字),target(目标位置)){

clearInterval(element.timeId);

element.timeId=setInterval(function(){

var current=parseInt(getStyle(element,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){ //是否到达目标

clearInterval(element.timeId);

}

//测试代码：console.log("目标："+target+"，当前："+current+",每次移动步数："+step);

},20);

}

</script>

*********增加多个属性********

my$("btn").onclick=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").onclick=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、手风琴效果

<ul>

</ul>

</div>

function getStyle(element,attr){ //获取任意一个元素的任意一个属性的当前值

return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;

}

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();

}

},20);

}

var list=my$("box").getElementsByTagName("li");

for(var i=0;i<lidt.length;i++){

list[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";

list[i].onmouseover=mouseoverHandle;

list[i].onmouseout=mouseoutHandle;

}

function mouseoverHandle(){

for(var j=0;j<list.length;j++){

animate(list[j],{"width":100});

}

animate(this,{"width":800});

}

function mouseoutHandle(){

for(var j=0;j<list.length;j++){

animate(list[j],{"width":240});

}

</script>

8、旋转木马

var config=[{width:400,top:20,left:50,opacity:0.2,zIndex:2}，{width:400,top:20,left:50,opacity:0.2,zIndex:2}];

window.onload=function(){ //页面加载事件

var flag=true; //所有动画执行完毕

var list=my$("slide").getElementsByTagName("li");

function assign(){

for(var i=0;i<list.length;i++){

animate(list[i],config[i],function(){

flag=true;

});

}

assign();

my$("arrRight").onclick=function(){

if(flag){

flag=false;

config.push(config.shift()); //顺序改变,追加(push),删掉第一个(shift)

assign(); //重新分配

}

};

my$("arrLeft").onclick=function(){

if(flag){

flag=false;

config.unshift(config.pop ());

assign(); //重新分配

}

};

my$("wrap").onmouseover=function(){

animate(my$("arrow"),{"opacity":1});

};

my$("wrap").onmouseout=function(){

animate(my$("arrow"),{"opacity":0});

};

</script>

<ul>

</ul>

</div>

9、client

clientWidth:可视区域的宽，没有边框，边框内容的宽度

clientHeight:可视区域的高，没有边框，边框内容的高度

clientLeft:左边框宽度

clientTop:上边框宽度

猜你喜欢