js/jQuery固定步长动画对比-CSDN博客

utils.js(封装的一些公共方法)

var utils = (function () {
    function offset(curEle) {
        var  l = curEle.offsetLeft;
        var  t = curEle.offsetTop;
        var p = curEle.offsetParent;
        while(p.nodeName !=="BODY"){
            l+=p.offsetLeft +p.clientLeft;
            t+=p.offsetTop+p.clientTop;
            p = p.offsetParent;
        }
        return {
            left:l,top:t
        }
    };
    function getCss(curEle,attr) {
        var  val;
        if("getComputedStyle" in window){
            // 先判断是否支持getComputedStyle;
            val = getComputedStyle(curEle)[attr];
        }else{
            val = curEle.currentStyle[attr];
        }
        // 去单位
        var reg = /^(width|height|margin|padding|left|top|right|bottom|fontZise)$/;
        // 校验当前属性是否带有单位
        if(reg.test(attr)){
            // 判断是否为空；
            if(!isNaN(parseFloat(val))){
                val = parseFloat(val);
            }
        }
        return val;
    }
// setCss : 每执行一次，都会设置元素一个属性样式；
    function setCss(curEle,attr,val) {
        var  reg = /^(width|height|top|left|right|bottom|padding|margin)$/;
        if(reg.test(attr)){
            if(typeof val==="number"){
                val = val + "px";
            }
        }
        curEle.style[attr]=val;// 设置行内样式；
    }
    function setGroupCss(curEle,obj) {
        // 遍历obj;调用封装的setCss，设置元素的单个样式；
        for(var key in obj){
            setCss(curEle,key,obj[key])
        }
    }
    function css(...arg) {// 在函数定义的括号中，... 是剩余运算符；将所有的实参放入到一个数组中；
        //
        if(arg.length===3){
            // [oBox,"height",300]
            setCss(...arg);
        }else if(arg.length===2){
            if(toString.call(arg[1])==="[object Object]"){
                setGroupCss(...arg)
            }else{
                return getCss(...arg)
            }
        }
    }
    function win(attr,val) {
        // 如果是两个实参，那么一定是设置；如果是一个实参，是获取；
        if(val===undefined){
            return document.documentElement[attr] || document.body[attr];
        }
        document.documentElement[attr] = val;
        document.body[attr] = val;


    }
    return {
        offset:offset,
        getCss:getCss,
        setCss:setCss,
        setGroupCss:setGroupCss,
        css:css,
        win:win
    }
})();

// 单例模式
/*
var utils= {
    offset:function offset(curEle) {
        var  l = curEle.offsetLeft;
        var  t = curEle.offsetTop;
        var p = curEle.offsetParent;
        while(p.nodeName !=="BODY"){
            l+=p.offsetLeft +p.clientLeft;
            t+=p.offsetTop+p.clientTop;
            p = p.offsetParent;
        }
        return {
            left:l,top:t
        }
    }
}*/
复制代码

js固定动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.固定步长动画</title>
    <style>
        html,body,div{
            margin: 0;
            padding: 0;
        }
        body{
            position: relative;
        }
        #box{
            width: 100px;
            height: 100px;
            background: greenyellow;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script src="utils.js"></script>
<script>
var oBox=document.getElementById('box');
var changeL=utils.win('clientWidth')-oBox.offsetWidth;
var timer;
var initL=0;//这个放的位置影响点击的时候是否回弹
oBox.onclick=function(){
     clearInterval(timer);
     timer=setInterval(()=>{
      initL+=6;
      console.log(initL);
      if(initL>=changeL){
         utils.css(oBox,'left',changeL);
         clearInterval(timer);
         return;
      }
      utils.css(oBox,'left',initL)
     },30)
}
</script>
</body>
</html>
复制代码

jQuery固定动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.固定步长动画</title>
        <style>
            html,body,div{
                margin: 0;
                padding: 0;
            }
            body{
                position: relative;
            }
            #box{
                width: 100px;
                height: 100px;
                background: greenyellow;
                border-radius: 50%;
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
</head>
<body>
<div id="box"></div>
<script src="jquery-1.11.3.js"></script>
<script src="utils.js"></script>
<script>
//    console.log($('#box'));//jQuery的实例,可以调用jQuery实例上的方法
    var oBoxOffsetL=$(window).width()-$('#box').outerHeight();
    console.log(oBoxOffsetL);
    var timer;
    $('#box').click(()=>{
        clearInterval(timer);
        var l=0;//这个设置的位置影响小球是否回弹
        timer=setInterval(()=>{
              l+=5;
              console.log(l);
              if(l>=oBoxOffsetL){
                 $('#box').css('left','oBoxOffsetL');//设置css属性,给left设置值
                 clearInterval(timer);
                 return;
              }
              $('#box').css('left',l);
        },30);
    })
</script>
</body>
</html>
复制代码