动画封装animate和scroll,广告跟随完整代码案例

function animate(ele,target) {
            //要用定时器,先清定时器
            //一个萝卜一个坑儿,一个元素对应一个定时器
            clearInterval(ele.timer);
            //定义定时器
            ele.timer = setInterval(function () {
                //获取步长
                //步长应该是越来越小的,缓动的算法。
                var step = (target-ele.offsetTop)/10;
                //对步长进行二次加工(大于0向上取整,小于0项下取整)
                step = step>0?Math.ceil(step):Math.floor(step);
                //动画原理: 目标位置 = 当前位置 + 步长
                ele.style.top = ele.offsetTop + step + "px";
                //检测缓动动画有没有停止
                console.log(1);
                if(Math.abs(target-ele.offsetTop)<=Math.abs(step)){
                    //处理小数赋值
                    ele.style.top = target + "px";
                    clearInterval(ele.timer);
                }
            },30);
        }
function scroll(){
            //如果这个属性存在,那么返回值应该是0-无穷大
            //如果没有返回值是undefined;
            //只要判断不是undefined就可以调用此方法
            //练习使用此种封装
            if(window.pageYOffset !== undefined){
//                var json = {
//                    "top": window.pageYOffset,
//                    "left": window.pageXOffset
//                };
//                return json;
                return {
                    "top": window.pageYOffset,
                    "left": window.pageXOffset
                };
            }else if(document.compatMode === "CSS1Compat"){
                return {
                    "top": document.documentElement.scrollTop,
                    "left": document.documentElement.scrollLeft
                };
            }else{
                return {
                    "top": document.body.scrollTop,
                    "left": document.body.scrollLeft
                };
            }

            //简单封装(实际工作使用)
//            return {
//                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
//                "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
//            }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值