一、Math常用函数
-
**Math.ceil() 向上取整 天花板 **
Math.ceil(1.11) 结果 是 2
Math.ceil(1.99) 结果 是 2
Math.ceil(-1.5) 结果 是 -1
-
**Math.floor() 向下取整 地板 **
Math.floor(1.11) 结果 是 1
Math.floor(1.99) 结果 是 1
Math.floor(-1.2) 结果 是 -2
-
Math.round() 四舍五入
Math.round(1.11) 结果 是 1
Math.round(1.99) 结果 是 2
Math.round(-1.2) 结果 是 -2
二、缓动动画原理
-
缓动动画的原理:** 盒子本身的位置 + 步长 (不断变化的，由大变小)**
-
步长：**begin = begin + (end - begin) / 缓动系数 **
-
基本的缓动动画函数：
// 缓动动画 // 谁 目标 function buffer(obj, target) { // 1. 清除定时器 clearInterval(obj.timer); // 2. 设置定时器 obj.timer = setInterval(function () { // 2.1 求出步长 var speed = (target - obj.offsetLeft) / 20; console.log(speed); speed = speed > 0 ? Math.ceil(speed): Math.floor(speed); console.log(speed); // 2.2 设置动画 obj.style.left = obj.offsetLeft + speed + 'px'; obj.innerHTML = obj.offsetLeft; // 2.3 清除定时器 if(obj.offsetLeft == target){ clearInterval(obj.timer); } }, 20); }
2.1 常见的 js访问 CSS 属性
-
在开发中，访问得到css 属性，比较常用的有两种：
-
点语法
box.style.width，box.style.height，box.style.top，box.style.left
得到带有单位的属性值，比如：200px；
但是，点语法存在一个很致命的问题，跟在style后面的属性不能由外面传入var h = 'height'; box.style.h = 300 + 'px';
-
-
- 下标语法
** 利用 [] 访问属性 元素.style[“属性”]; **
这种语法的好处就是可以动态的传递参数作为属性var h = 'height'; box.style[h] = 300 + 'px';
2.2 JS获取CSS的样式
在开发中，我们想要获得css 的样式，通常采用：box.style.top ，box.style.backgorundColor等， 但这种方式只能得到 行内样式，而平常用的最多的是页内样式或者外部样式， 如何解决。
-
在IE和Opera浏览器
**obj.currentStyle **
-
其他W3C标准浏览器
**window.getComputedStyle("元素", "伪类") ** （ 注意：两个选项是必须的， 没有伪类 用 **null **替代 ）
-
- 兼容写法
function getStyleAttr(obj, attr) { if(obj.currentStyle){ // IE 和 opera return obj.currentStyle[attr]; }else { return window.getComputedStyle(obj, null)[attr]; } }
- 兼容写法
2.3 js对象遍历
-
for in 关键字
for ( 变量 in 对象) { 执行语句; }
for(var k in json){ console.log(k); // key console.log(json[k]); // value }
2.4 回调函数
在开发中，有很多操作是链式的，下一个操作接着上一个操作执行，如何实现** 回调函数。**
回调函数什么时候调用?
--> 动画结束的时候调用
--> 动画什么时候结束?
---> 定时器被清除的时候
--> 定时器被清除时调用回调函数
2.5 完整版缓动动画
/*
* 缓动动画
* obj: 要做动画的元素
* json: 要做动画的属性键值对
* fn: 回调函数
*/
function Buffer(obj, json, fn) {
// 1. 清除定时器
clearInterval(obj.timer);
// 2. 设置定时器
obj.timer = setInterval(function () {
var flag = true, begin, target;
// 2.1 遍历json
for(var k in json){
// 2.1.1 获取做动画属性的初始值
if('opacity' == k){ // 透明度
begin = parseInt(parseFloat(getCssStyleAttr(obj, k)) *100) || 0;
target = parseInt(parseFloat(json[k])*100);
}else { // 其他动画
begin = parseInt(getCssStyleAttr(obj, k));
target = parseInt(json[k]);
}
// 2.1.2 获取动画的步长
var speed = (target - begin) / 20;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 2.1.3 设置缓动动画
if('opacity' == k ){ // 透明度
obj.style.opacity = (begin + speed) / 100;
obj.style.filter = 'alpha(opacity='+ (begin + speed) +')';
}else if('zIndex' == k){
obj.style.zIndex = json[k];
}else { // 其他情况
obj.style[k] = begin + speed + 'px';
}
// 2.1.4 判断是否清除定时器
flag = (begin != target) ? false : true;
}
// 2.2 清除定时器
if(flag){
clearInterval(obj.timer);
//判断
if(fn){
fn(); // 执行函数
}
}
}, 20);
}
function $(id) {
return document.getElementById(id);
}
function getCssStyleAttr(obj, attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj, null)[attr];
}
}
4256-106.jpg
61048-106.jpg
网友评论