表捉急先看这几个知识点！
取整函数
| 函数名 | 功能 |
|---|---|
| Math.ceil() | 向上取整 |
| Math.floor() | 向下取整 |
| Math.round() | 四舍五入函数 |
<br />
js常用访问 CSS 属性
- 点语法 box.style.width
- 利用[]访问属性 box.style[“width”]
优点：可以给属性传递参数
function getStyle(obj, attr) {
if (obj.currentStyle) {
// ie等
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj, null)[attr];
// w3c 浏览器
}
}
<br />
JSON遍历
var json = {width:200,height:300,left:50}
for(var k in json)
{
console.log(k); // 属性
console.log(json[k]); // 值（不带单位）
}
<br />
1.0 匀速运动
<br />
清除定时器，容易发疯啊哈哈
速度设为15px,根据target与obj.offsetLeft的值来判断运动的方向，正右负左。
然后就动一动。
根据target和offsetLeft的差值，当差值绝对值小于15px时可以停止了
问：为啥是15px?
答：如果target=70,那么offsetLeft的值：0，15，30，45，60，75，90……
等等！
发现了嘛！吃了炫迈，等于70的时候没有，根本停不下来……既然停不下来，那么设定范围即为速度15~
停止时设定obj.style.left = target 就可以咯
function animate(obj, target) {
clearInterval(obj.timer); // 清除定时器
var speed = obj.offsetLeft < target ? 15 : -15;
// 用来判断 应该 + 还是 -
obj.timer = setInterval(function () {
var result = target - obj.offsetLeft;
// 因为他们的差值不会超过15
obj.style.left = obj.offsetLeft + speed + "px";
if (Math.abs(result) <= 15)
// 如果差值不小于 15 说明到位置了
{
clearInterval(obj.timer);
obj.style.left = target + "px";
// 有15像素差距 我们直接跳转目标位置
}
}, 10)
}
<br />
2. 缓速封装运动框架1.0
基本原理同1
速度越来越慢，所以使用公式(target - box.offsetLeft) / 10
因为通过公式计算出的速度可能为浮点型，所以通过上下取整进行计算一下
问：为什么是上下取整？
答：最后的最后，速度可能为0.5，0.4……或者-0.5，-0.4……
正负数，你懂的啊，0.5向下取整便0；-0.5当然要向上取整啊亲！
不然又停不下来了，啊哈哈
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var target = 400;
var timer = null;
btn.onclick = function () {
timer = setInterval(function () {
var step = (target - box.offsetLeft) / 10;
step > 0 ? Math.ceil(step) : Math.floor(step);
box.style.left = box.offsetLeft + step + "px";
}, 30);
}
</script>
发现了吗
只能向左右动，尴尬！
如何自由灵敏全方位无死角动起来？
→ biu~ biu~
→ 客官请看
<br />
2. 缓速封装运动框架2.0
还记得js如何访问 CSS 属性不
不记得就拉到上面look一下
根据这个属性，对运动函数进行封装加入了attr，左右上下动起来
// 封装单个属性的运动框架
function animate(obj, attr, target) { // 给谁、什么属性、改为多少
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var current = parseInt(getStyle(obj, attr));
// 得到当前的样式 去掉px
var step = ( target - current ) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px";
if (current == target) {
clearInterval(obj.timer);
}
}, 30)
}
<br />
如何变得更加自由灵敏全方位无死角动起来？
→ biu~ biu~
→ 客官请看
→ 傲娇小JSON
<br />
3.缓速封装运动框架3.0
在升级版中加入了回调函数，啦啦啦
回调函数：等动画执行完毕执行（定时器停止时）。并添加透明度的变化
第9行 || 0
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var attr in json) {
var current = 0;
if (attr == "opacity") {
// ie678中如果不能识别则为undefined，因此 || 0
current = parseInt(getStyle(obj, attr) * 100)|| 0;
}
else {
current = parseInt(getStyle(obj, attr));
}
var step = ( json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (attr == "opacity") {
if ("opacity" in obj.style) {
obj.style.opacity = (current + step) / 100;
}
else {
obj.style.filter = "alpha(opacity = " + (current + step) + ")";
console.log(current);
}
}
else if (attr == "zIndex") {
obj.style.zIndex = json[attr];
}
else {
obj.style[attr] = current + step + "px";
}
if (current != json[attr]) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 5)
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return window.getComputedStyle(obj, null)[attr];
}
}
发现了吗？套路！都是套路！
经过不断封装，函数逐渐变得完善~
更加方便使用
