JavaScript封装动画函数 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin-top: 10px;
            width: 100px;
            height: 50px;
            background-color: purple;
            position: absolute;
        }
    </style>
</head>
<body>
<input type="button" value="移动到400px" id="bt1"/>
<input type="button" value="移动到800px" id="bt2"/>

<div id="dv"></div>
<script src="common.js"></script>
<script>
    my$("bt1").onclick = function () {
        animate(my$("dv"), 400);
    };
    my$("bt2").onclick = function () {
        animate(my$("dv"), 800);
    };

    //动画函数
    function animate(element, target) {
        //一会要清理定时器(只产生一个定时器)
        var timeId = setInterval(function () {
            //获取div当前的位置
            var current = element.offsetLeft;//数字类型没有px
            //div每次移动多少像素-----步数
            var step = 10;
            step = current < target ? step : -step;
            //每次移动后的距离
            current += step;
            //判断当前移动后的位置是否到达目标位置
            if (Math.abs(target - current) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                //清理定时器
                clearInterval(timeId);
                element.style.left = target + "px";
            }
        }, 20)
    }
</script>
</body>
</html>

common.js:

/**
 * Created by Administrator on 2018/7/22.
 */
function my$(id) {
    return document.getElementById(id);
}
//设置任意的标签中间的文本内容
function setInnerText(element, text) {
    //判断浏览器是否支持该属性
    if (typeof element.textContent == "undefined") {
        element.innerText = text;
    } else {
        element.textContent = text;
    }
}
//获取任意标签中间的文本内容
function getInnerText(element) {
    if (typeof element.textContent == "undefined") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}
//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
    if (element.firstElementChild) {//true 支持
        return element.firstElementChild;
    } else {
        var node = element.firstChild;//第一个子节点
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}

//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
    if (element.lastElementChild) {
        return element.lastElementChild;
    } else {
        var node = element.lastChild;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}

//为任意元素绑定任意事件
//参数1:任意元素
//参数2:事件类型
//参数3:事件处理函数
function addEventListner (element, type, fn) {
    //判断浏览器是否支持该方法
    if(element.addEventListener) {
        element.addEventListener(type,fn, false);
    }else if(element.attachEvent) {
        element.attachEvent("on" + type, fn);
    }else {
        element["on"+type] = fn;
    }
}

 

posted @ 2018-08-02 15:14  {颜逸}  阅读(577)  评论(0)  编辑  收藏  举报