本帖最后由 小鲁哥哥 于 2017-9-21 16:10 编辑
【黑马程序员济南】 前端与移动开发就业班笔记事件特效：Day01
offset系列offsetWidth和offsetHeight用来得到对象的大小 offsetHeight和style.height的区别 demo.style.height只能获取行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获取 style.height是字符串（而且带单位），offsetHeight是数值 demo.style.height可以设置行内样式，offsetHeight是只读属性 因此，一般用demo.offsetHeight来获取某元素的真实宽度/高度，用style.height来设置宽度/高度
offsetHeight的构成 offsetHeight = height+padding+border 包括 自身高度 内边距 边框 不包括 外边距
offsetParentoffsetParent爸爸去哪 返回该对象距离最近的带有定位的父级 如果当前元素的所有父级元素都没有定位（position为absolute或relative），offsetParent为body 如果当前元素的父级元素中有定位（position为absolute或relative），offsetParent取最近的那个父级元素 另外注意offsetParent与parentNode的区别parentNode只找自己的上一级
offsetLeft和offsetTop用来得到对象的位置（注意：没有offsetRight和offsetBottom） offsetLeft的构成 到距离自身最近的（带有定位的）父元素的左侧/顶部 的距离 如果所有父级都没有定位则以body 为准 offsetLeft是自身border左侧到父级padding左侧的距离 offsetLeft和style.left的区别 一、style.left只能获取行内样式 二、offsetLeft只读，style.left可读可写 三、offsetLeft是数值，style.left是字符串并且有单位px 四、如果没有加定位，style.left获取的数值可能是无效的 五、最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准
在行内设置以下属性，并且记得加定位
Math对象Math对象常用方法 天花板 向上取整 负数取更大的 Math.ceil(x) 地板 向下取整 负数取更小的 Math.floor(x) 就近取整 Math.round(x) 取绝对值 Math.abs(x) [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
console.log(Math.ceil(1.9));//2 天花板 向上取整
console.log(Math.ceil(1.1));//2 天花板 向上取整
console.log(Math.ceil(-1.1));//-1 天花板 向上取整
console.log(Math.ceil(-1.9));//-1 天花板 向上取整
console.log(Math.floor(1.1));//1 地板 向下取整
console.log(Math.floor(1.9));//1 地板 向下取整
console.log(Math.floor(-1.1));//-2 地板 向下取整
console.log(Math.floor(-1.9));//-2 地板 向下取整
console.log(Math.round(1.1));//1 周围 就近取整
console.log(Math.round(1.9));//2 周围 就近取整
console.log(Math.round(-1.1));//-1 周围 就近取整
console.log(Math.round(-1.9));//-2 周围 就近取整
console.log(Math.abs(1.1));//1.1 absolute 绝对值
console.log(Math.abs(-1.1));//1.1 absolute 绝对值
动画原理动画原理公式 动画原理公式： leader = leader + step leader表示盒子当前位置 step表示步长 box.style.left= box.offsetLeft + 10 + "px"; 让setInterval不断执行某个函数修改盒子的位置属性最后就实现了动画的效果 动画函数封装 动画函数较为复杂，却又很常用对于这样的函数，我们一般都会进行封装 需求：能够让任意对象移动到指定位置。 [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//需求 能够让任意对象移动到指定位置
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var leader = obj.offsetLeft;
var step = 10;
if (leader < target) {
leader = leader + step;
obj.style.left = leader + "px";
} else {
clearInterval(obj.timer);
}
}, 15);
}
动画函数改进然而封装之后的函数还有很多问题，所以我们要对其进行进一步改进 判断运动方向 完善终点检测 终点清除定时器 手动设置对象位置到终点 调用开始先清理定时器，防止多次调用 [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//需求 能够让任意对象移动到指定位置
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var leader = obj.offsetLeft;
var step = 10;
step = leader < target ? step : -step;//step有了正负
if (Math.abs(leader - target) >= Math.abs(step)) {
leader = leader + step;
obj.style.left = leader + "px";
} else {
obj.style.left = target + "px";//手动放到终点
clearInterval(obj.timer);
}
}, 15);
}
最后附送一份今天的案例。如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友，那就快来吧！
黑马程序员济南中心联系电话：0531-55696830
| 
收藏
淘帖
踩
