本文目录

JavaScript 封装动画库基础

🌙
手机阅读
本文目录结构

封装动画库

其实这不应该叫库,因为只有一个方法;

借用了以前封装DOM库中的setCss方法来设置的;

  • 因为经常设置的,是
  • 宽度
  • 高度
  • 距离左边位置
  • 透明度
  • 背景颜色

等这些的项;封装一个starMove的方法来处理这些;

startMove(ele, json, fnEnd){};

的其中ele,代表的是执行主体;json代表需要改变的样式,是一个json格式的对象;后面的fnEnd代表是回调函数;在事件发生的时候,同时回调一个函数;

动画库里面moveType 中是数学运算是网上搜的,并不是自己写的;

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动画移动</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: orange;
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
            overflow: auto;//固定高宽,出现滚动条的意思;
        }
    </style>
</head>
<body>
<div id="div1">ClickMe ComeOn</div>
</body>
</html>
<script>
    var oDiv=document.getElementById("div1");
    var jsonStr={
        "left":"500",
        "width":"100",
        "height":"400",
        "opacity":"30",
        "background":"blue"
    };
    oDiv.onclick=function(){startMove(oDiv,jsonStr);};
    function startMove(ele, json, fnEnd) {//json是一个包含样式的JSON格式字符串,也可以是对象格式;
        var MAX=18;//如果是匀速运动,可以通过这个数控制匀速;如果是变速运动,则不需要这一行;
        clearInterval(ele.timer);
        ele.timer=setInterval(function (){
            var booleanTarget=true;
            for(var name in json) {//枚举JSON里面的属性和目标值;
                var iTarget=json[name];//目标值;
                if(name=='opacity') {//透明度因为要写兼容性处理,2种写法,所以opacity需要X100;
                    var cur=Math.round(parseFloat(setCss(ele, name))*100);
                } else if(name=='background'){
                    var cur=json[name];
                } else {
                    var cur=parseInt(setCss(ele, name));//对象的初始值;
                }
                var speed=(iTarget-cur)/5;//速度=(目标值-初始值)/一个数,属于减速运动;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);//减速运动的,速度的取整;
                if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;//如果是匀速,可以通过这个来控制速度;和上面的speed只能取一个计算;

                if(name=='opacity') {//如果输入透明度,需要为80这种的,不能是0.8
                    ele.style.filter='alpha(opacity:'+(cur+speed)+')';
                    ele.style.opacity=(cur+speed)/100;
                }else if(name=='background'){
                    ele.style[name]=cur;
                } else {
                    ele.style[name]=cur+speed+'px';
                }
                if(cur!=iTarget) {
                    booleanTarget=false;
                }
            }
            if(booleanTarget) {
                clearInterval(ele.timer);
                if(typeof fnEnd==="function") {
                    fnEnd();
                }
            }
        }, 20);
    }
    function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
        if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
            var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
            var flag="getElementsByClassName" in document;
            var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
            return !reg.test(attr) ? parseFloat(value) : value;
        } else{
            switch (attr) {
                case "opacity":
                    curEle["style"][attr] = value;
                    curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                    break;
                case "zIndex":
                    curEle["style"][attr] = value;
                    break;
                default:
                    curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
            }
        }
    };

</script>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了