A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2017-10-11 18:48 编辑

【黑马程序员济南】 前端与移动开发就业班笔记事件特效:Day02


上节回顾
offsetWidth=Width+padding+border
offsetHeight = height+padding+border
offsetLeft到距离自身最近的(带有定位)父元素的左侧/顶部 的距离
offsetParent 返回该对象距离最近的带有定位的父级
1.png
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
被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离
2.png

获取页面滚动座标
页面滚动座标非常常用,但是有很大的兼容性问题,可以合写为
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



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马