JavaScript 动画案例分析

一、onScroll事件

1.用处：是页面滚动条滚动事件，当页面滚动条滚动时候，自动触发

2. 从属于 window 对象，事件应绑定到 window 对象上

二、 scrollTop 和 scrollLeft

1.含义： scrollTop 指的是向上滚动头部高度

        scrollLeft 指的是向左滚动的宽度

2. 注意： 兼容性不好，不同浏览器的scrollTop/scrollLeft属性从属对象不一

chrom浏览器：从属于body对象上

火狐浏览器，ie：从属于document.documentElement对象上

ie9+浏览器、chrom、firefox：window.pageXOffset和window.pageYOffset(早期IE不支持)

兼容写法：

document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset||0

document.body.scrollLeft||document.documentElement.scrollLeft||window.pageXOffset||0

三、onresize事件

1.用处： onresize 事件会在窗口或框架被调整大小时发生

   window 对象支持 onresize 事件，同时常规标签也都支持（ div 、 textarea 、 table 等）

四、获取窗口的宽高值

兼容写法如下

宽度： document.body.clientWidth || document.documentElement.clientWidth

高度： document.body.clientHeight || document.documentElement.clientHeight

五、js动画实现

实现步骤

1 ）定义需要修改的属性当前值： var current = 0 ；

2 ）定义需要修改的属性目标值： var target = 值；

3 ）定义一个定时器对象： var timerinter = null;

4 ）借助 setInterval 来 循环按针 每 20 毫秒修改 current 值一次

5 ）当 current 值和 target 值相等时，则停止 setInterval 方法的执行

实例：案例二

案例一 ：响应式变色

要求：编写一个页面

当页面宽度在 800px 以上，则背景为红色

当页面宽度在 400px-800px ，则背景为绿色

当页面宽度在 400px 以下，则背景为蓝色

实现代码：

案例二：动画

需求：通过按钮出发事件

div 效果通过渐变方式变化为指定条件

	
	
	


	

	变长
	移动
	

案例三：导航贴边+弹性广告+侧边爬楼

源代码：

index.html

	
	
	
	
	


	
导航栏
	
移动导航栏
	

		

			
1
			
2
			
3
			
4
			
5
			
6
			
7
			
8
			
9
			
顶部
		
	
	
浮动广告
	
1
	
2
	
3
	
4
	
5
	
6
	
7
	
8
	
9

common.js

function $(name){
	if(name.indexOf("#")==0){
		return document.getElementById(name.slice(1));
	}else if(name.indexOf(".")==0){
		return document.getElementsByClassName(name.slice(1));
	}else{
		return document.getElementsByTypeName(name);
	}
}
//获取滚轮的偏移量
function scrollTop(){
	return document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset||0;
}
function scrollLeft(){
	return document.body.scrollLeft||document.documentElement.scrollLeft||window.pageXOffset||0;
}

//滑动效果
function slide(obj,attr,value){
	//设置当前位置和目标位置的标记
	var current=obj.style[attr];
	var target = value;
	//停止该对象的上一个计时器
	clearInterval(obj.interval);
	//计时器修改属性
	obj.interval = setInterval(function(){
		var length = (target-current)/20;
		length = length>0?Math.ceil(length):Math.floor(length);
		current = current+length;
		obj.style[attr]=current;
		//停止计时器
		if(length==0){
			clearInterval(obj.interval);
		}
	},20);
}

index.js

window.οnlοad=function(){
	//获取dom的元素
	var nav = $(".nav")[0];
	var nav_move = $(".nav_move")[0];
	var movebox = $(".movebox")[0];
	var dirs = $(".li");


		console.log(dirs);
	//移动盒子的最初高度
	var movebox_top = movebox.offsetTop;
	var interval1 = null;
	window.οnscrοll=function(){
		//设置导航栏跟随窗口移动
		var st = scrollTop();
		//显示移动菜单栏
		if(st >= 100){
			nav_move.style.display="block";
			nav.style.display="none";
			nav_move.style.top=st;
		}else{
			nav_move.style.display="none";
			nav.style.display="block";
		}
		
		//使黄色盒子位子不变
		//关闭上一个循环
		clearInterval(interval1);
		//当前和目标位置标记
		var mb_current = movebox.offsetTop;
		var mb_target =movebox_top+scrollTop();
		interval1=setInterval(function(){
			mb_current= mb_current+(mb_target-mb_current)/20;
			movebox.style.top = mb_current+"px";
		},20);
	}
			
	for(var index in dirs){
		dirs[index].number=index;
		var scroll_interval =null;
		var scroll_current = 0;
		dirs[index].οnclick=function(event){
			//设置页面当前和目标位置
			window.clearInterval( scroll_interval);
			var scroll_target = this.number*300;
			event=window.event||event;
			scroll_interval = setInterval(function(){
				var juli = parseInt((scroll_target-scroll_current)*1000);
				if(juli>1||juli<-1){
					scroll_current = scroll_current+ (scroll_target-scroll_current)/20;
					window.scrollTo(0,scroll_current);
				}
			},10);
		}
	}
}

案例三：导航贴边+弹性广告+侧边爬楼

源代码：

index.html