本帖最后由 小鲁哥哥 于 2017-10-11 18:48 编辑
【黑马程序员济南】 前端与移动开发就业班笔记事件特效：Day02
上节回顾offsetWidth=Width+padding+border offsetHeight = height+padding+border offsetLeft到距离自身最近的（带有定位的）父元素的左侧/顶部 的距离 offsetParent 返回该对象距离最近的带有定位的父级 Math.ceil(x) ：天花板 向上取整 负数取更大的 Math.floor(x)：地板 向下取整 负数取更小的 Math.round(x)：就近取整 Math.abs(x)：取绝对值
动画原理公式 leader = leader + step offset偏移量 left左 top顶 width宽 height高 parent父母 math数学absolute绝对 ceil天花板 floor地板 round周围 leader领导 target目标 step步interval间歇
scroll系列scrollHeight和scrollWidth 对象内部实际内容的高度/宽度 scrollTop和scrollLeft 被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离
获取页面滚动座标 页面滚动座标非常常用，但是有很大的兼容性问题，可以合写为 varscrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop || 0; 封装自己的scroll() 由于非常常用，每次都写上面那一大堆很麻烦。我们可以封装一个自己的scroll()方法，返回页面滚动座标 固定导航案例当页面向下滚动的时候 进行判断如果页面向上走的距离 大于导航栏到页面顶部的距离时 将导航栏的定位改为固定定位 小问题：当导航栏改为固定定位的一瞬间，后面的元素会塌陷。解决方案：给下面的元素添加数值为导航栏高度的padding-top [HTML] 纯文本查看 复制代码 <body>
<div class="top" id="topPart">
<img src="images/top.png" alt=""/>
</div>
<div id="navBar">
<img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
<img src="images/main.png" alt=""/>
</div>
</body>[JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
var topPart = document.getElementById("topPart");
var navBar = document.getElementById("navBar");
var mainPart = document.getElementById("mainPart");
//需求：窗体滚动的时候 判断页面被卷去的头部的高度 如果 大于topPart的高度
//就要把navBar变为固定定位
window.onscroll = function () {
//判断页面被卷去的头部的高度 如果 大于topPart的高度
if (scroll().top > topPart.offsetHeight) {
navBar.className = "fixed";
//navBar变为固定定位后 脱离标准流 不再占位置 后面的就跳上来了
//为了防止 后面的内容跳上来 可以 给后面的内容 加paddingTop
mainPart.style.paddingTop = navBar.offsetHeight + "px";
} else {
navBar.className = "";
mainPart.style.paddingTop = 0;
}
};
//获取scrollTop和scrollLeft的值
function scroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}获取计算后样式的方法 工作中我们经常需要获取一个盒子的最终样式 比如 就要获取未加定位的盒子的left属性值 那么如何到计算后的样式属性值呢： [JavaScript] 纯文本查看 复制代码 w3c
window.getComputedStyle(元素,伪元素)["left"]
IE
div.currentStyle.left或div.current["left"] 第二个参数是伪元素，我们传入null即可
缓动动画动画公式 leader = leader + step 匀速动画公式 step = 定值 leader = leader + step 缓动动画公式 step = ( target - leader ) / 10 leader = leader + step
缓动动画的好处 他的移动是有尽头的。不像基础匀速运动那样无限移动。 有非常逼真的缓动效果，实现的动画效果更细腻。 如果不清除定时器，物体永远跟着目标leader在移动。
函数封装 缓动动画改进 我们对缓动动画进行一下改进，如下需求：
1、多个数值属性2、升级版定时器
3、添加回调函数4、透明度和层级
缓动函数封装代码 [JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
//所有属性都到达目标值之后才能清理定时器
//封装 能够让 任意对象 的指定属性 变到指定值 的动画函数
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var k in json) {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
if (leader !== target) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {//如果有才调用
fn();//动画执行完成后执行
}
}
}, 15);
}
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}
透明度 [JavaScript] 纯文本查看 复制代码 w3c
opacity:x;
x为0-1
IE8
filter:alpha(opacity=x);[/align][align=left][font=微软雅黑][size=3]x为0-100[/size][/font][/align][align=left][font=微软雅黑][size=3]这里暂时不考虑IE678的兼容问题[/size][/font]
最后附送一份今天的案例。如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友，那就快来吧！
黑马程序员济南中心联系电话：0531-55696830
| 
收藏
淘帖
踩
