zoukankan      html  css  js  c++  java
  • 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)
    }
  • 相关阅读:
    psi
    firefox修改语言
    automapper
    堆喷图解
    脱壳系列_0_FSG壳_详细版
    脱壳系列_1_UPX壳_详细版
    算法01-最大子数组详解
    逆向MFC程序
    如何执行shell命令
    Unity之流光效果
  • 原文地址:https://www.cnblogs.com/adylz111/p/13433672.html
Copyright © 2011-2022 走看看