JavaScript 动画案例分析

最新推荐文章于 2025-03-25 23:56:14 发布

Keen__

最新推荐文章于 2025-03-25 23:56:14 发布

阅读量832

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq937654393/article/details/79613904

版权

一、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 以下，则背景为蓝色

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta charset="utf-8">
	<title>随页面大小改变颜色</title>
	<style type="text/css">
		.color_red{
			background-color: red;
		}
		.color_yellow{
			background-color: yellow;
		}
		.color_green{
			background-color: green;
		}
	</style>
</head>
<body>
	<script type="text/javascript">
		var body = document.getElementsByTagName("body")[0];
		window.οnresize=function(){
			var clientWidth=document.body.clientWidth || document.documentElement.clientWidth;
			if (clientWidth<400) {
				body.className="color_red";
			}else if (clientWidth>400&&clientWidth<1000) {
				body.className="color_yellow";
			}else{
				body.className="color_green";
			}
		}
	</script>
</body>

</html>

案例二：动画

需求：通过按钮出发事件

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta charset="utf-8">
	<title>图形变化</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: green;
		}
		
	</style>
</head>
<body>
	<div class="box"></div>
	<button >变长</button>
	<button >移动</button>
	<script type="text/javascript">
		var box = document.getElementsByTagName("div")[0];
		var buttons = document.getElementsByTagName("button");
		buttons[0].οnclick=function(){
			window.clearInterval(timer);
			var current = box.offsetWidth;
			var target=800;
			//保存计时器对象
			var timer = null;
			timer = setInterval(function(){
				current = current+(target-current)/20;
				box.style.width=current+"px";
			},20);
		}
		buttons[1].οnclick=function(){
			window.clearInterval(timer);
			var current = box.offsetLeft;
			var target=800;
			//保存计时器对象
			var timer = null;
			timer = setInterval(function(){
				current = current+(target-current)/20;
				box.style.marginLeft=current+"px";
			},20);
		}

	</script>
</body>
</html>

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

源代码：

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.nav,.nav_move{
			width: 100%;
			height: 50px;
			background-color: red;
			color: #fff;
			font-size:30px;
			text-align: center;
			position: absolute;
			top: 100px;

		}
		.nav_move{
			display: none;
			position: fixed;
			top: 0px;
			z-index: 1;
		}
		.box{
			width: 100%;
			height: 300px;
			color: #fff;
			font-size: 200px;
			text-align: center;
		}
		.dir{
			width: 40px;
			height: 198;
			background-color: #b1aaaa;
			position: fixed;
			right: 10px;
			top: 300px;
		}
		.dir ul{
			list-style: none;
		}
		.dir ul li{
			width: 100%;
			height: 40px;
			text-align: center;
			line-height:40px;
			background-color: #b1aaaa;
			cursor: pointer;
			border:1px solid black;

			
		}
		.movebox{
			width: 200px;
			height: 400px;
			background-color: yellow;
			position: absolute;
			top: 300px;
			left: 10px;

		}
		.bgblue{
			background-color: blue;
		}
		.bggreen{
			background-color: green;
		}

	</style>
</head>
<body>
	<div class="nav">导航栏</div>
	<div class="nav_move ">移动导航栏</div>
	<div class="dir">
		<ul>
			<li class="li">1</li>
			<li class="li">2</li>
			<li class="li">3</li>
			<li class="li">4</li>
			<li class="li">5</li>
			<li class="li">6</li>
			<li class="li">7</li>
			<li class="li">8</li>
			<li class="li">9</li>
			<li>顶部</li>
		</ul>
	</div>
	<div class="movebox">浮动广告</div>
	<div class="box bgblue">1</div>
	<div class="box bggreen">2</div>
	<div class="box bgblue">3</div>
	<div class="box bggreen">4</div>
	<div class="box bgblue">5</div>
	<div class="box bggreen">6</div>
	<div class="box bgblue">7</div>
	<div class="box bggreen">8</div>
	<div class="box bgblue">9</div>
</body>
</html>

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

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