0%

JavaScript 运动

发表于 更新于

运动基础

让 Div 运动起来

速度——物体运动的快慢

运动中的 Bug

不会停止 –>临界值问题

速度取某些值会无法停止

到达位置后再点击还会运动 –> clearInterval()

重复点击速度加快

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload = function () {
	var oBtn = document.getElementById('btn1');
	var oDiv = document.getElementById('div1');
	var timer = null;

	oBtn.onclick = function (){
		clearInterval(timer);	//保证就1个定时器
		timer = setInterval(function () {
			var speed = 1;
			if(oDiv.offsetLeft > 300){
				clearInterval(timer);
			}
			else{
				oDiv.style.left = oDiv.offsetLeft + speed + 'px';
			}
			
		}, 30);

		
	}

运动框架

在开始运动时，关闭已有定时器

把运动和停止隔开(if / else)

运动框架实例

例子1：“分享到”侧边栏 –> demo2.html

通过目标点，计算速度值

例子2：淡入淡出的图片

用变量存储透明度 –> demo3.html

主要是设置 opcity 并为其赋值

缓冲运动

逐渐变慢，最后停止

距离越远速度越大

速度由距离决定

速度 = (目标值-当前值) / 缩放系数

例子：缓冲菜单 –> demo4

Bug：速度取整 speed > 0 ? Math.ceil(speed) ：Math.floor(speed)

跟随页面滚动的缓冲侧边栏

潜在问题：目标值不是整数时 parseInt();

运动终止条件

匀速运动：距离足够近

缓冲运动：两点重合

多个物体同时运动

例子：多个 Div，鼠标移入变宽 –> demo5

单定时器，存在问题

每个 Div 一个定时器

多物体运动框架

定时器作为物体的属性

参数的传递：物体、目标值

例子：多个 Div 淡入淡出 –> demo6

所有东西都不能公用

属性与运动对象绑定：速度、其他属性值（如透明度等）

任意值运动框架

offset 属性的 Bug

有边框的 Div 变宽

用currentStyle / computedStyle(obj, flase)[name] 代替 offset

原有运动框架的问题

只能让某个值运动起来

如果想让其他值运动起来，要修改程序

扩展的运动框架 –> demo7

运动属性作为参数

封装 opacity

小数的问题 –> Math.round() 主要是为了适配 IE7

图片展示

效果思路

两边的按钮——淡入淡出

大图下拉——层级、高度变化

下方的 li——多物体淡入淡出

下方的 Ul——位置计算

左右按钮

淡入淡出

第一个小问题： 鼠标移到按钮上，按钮会消失

层级问题

按钮和遮罩上都得加上事件

下方 Li 效果

点击切换大图——选项卡

Li 淡入淡出——移入移出

Ul 移动——位置计算

大图片切换

图片层级—— zIndex 一直加1

图片下拉效果(运动框架)

可以改为淡入淡出

加入自动播放

和选项卡一样

另一个问题：ul 开始的宽度并不够， 需要计算后赋值

自己看着敲了一边在默敲一遍，自己的问题还是比较多，细节与思路还是不够。 –> demo9

最后运动框架

多个值同时变化

setStyle同时设置多个属性

参数传递

Json的使用

for in 遍历属性

运用到运动框架

检测运动停止

标志变量

例子：伸缩同时淡入淡出的菜单

还有就是链式运动， 依次完成运动，可以参考后面几个 demo