js-API 04 动画封装

一,创建元素的三种方式
document.write()
document.createElement()
innerHTML()
appendChild()
二,事件三要素
事件源   事件  事件执行程序
三,绑定解绑
绑定事件 addEventListener
var son = document.querySelector(".son");
son.addEventListener('click', once1,false);
function once1() {
alert(1)
}

绑定事件attachEvent
解绑事件
son.removeEventListener('click', once1,false);
function once1() {
alert(1)
}

* 对象.attachEvent("on事件类型",命名函数);---绑定事件
* 对象.detachEvent("on事件类型",函数名字);
animate封装动画
// 动画的封装方法(ele,target,step)可左右移动(只改变左边距)
function animate(element, target,step) {
    var step = step;
    clearInterval(element.timeId);

    element.timeId = setInterval(function () {
         step = element.offsetLeft < target ? Math.abs(step):-Math.abs(step);
        
        element.style.left = (element.offsetLeft + step) + 'px';
        // console.log(element.style.left)
         if(Math.abs(element.offsetLeft-target)<Math.abs(step)){
             
             element.style.left = target+'px';
             clearInterval(element.timeId)
            console.log(element.style.left)
            
         }
        
    }, 20)
}