js/jQuery左右运动的动画-CSDN博客

js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.用原生写左右运动的动画</title>
        <style>
        html,body,div{
            margin: 0;
            padding: 0;
        }
        body{
            position: relative;
        }
        #box{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
        #left,#right{
            width: 100px;
            height: 30px;
            line-height: 40px;
            text-align: center;
            background: greenyellow;
            border: none;
            position: absolute;
            top: 120px;
            user-select: none;/*控制页面的文字不能被选中*/
        }
        #left{
            left: 100px;
        }
        #right{
            left: 500px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<input type="text" id="left" value="向左走"><!--如果给input框加disabled="true"属性,就无法点击了-->
<input type="text" id="right" value="向右走">
<script src="utils.js"></script>
<script>
    var oBox=document.getElementById('box');
    var left=document.getElementById('left');
    var right=document.getElementById('right');
    var changeL=0;
    var changeR=utils.win('clientWidth')-oBox.offsetWidth;
    var timer;
    function move(target){
        clearInterval(oBox.timer);
         var curL=utils.css(oBox,'left');
         if(curL<target){
            oBox.timer=setInterval(function(){
                curL+=5;
                console.log(curL);
                if(curL>=changeR){
                   utils.css(oBox,'left',changeR);
                   clearInterval(oBox.timer);
                }
                   utils.css(oBox,'left',curL);
            })
         }

         if(curL>target){
            oBox.timer=setInterval(function(){
                 curL-=5;
                 console.log(curL);//越来越小
                 if(curL<=changeL){
                    utils.css(oBox,'left',changeL);
                    clearInterval(oBox.timer);
                    return;
                 }
                 utils.css(oBox,'left',curL);
            })
         }

    };
    left.onclick=function(){
        move(changeL);
    };
    right.onclick=function(){
        move(changeR);
    }
</script>
</body>
</html>
复制代码

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|opacity)$/;
        // 校验当前属性是否带有单位
        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
        }
    }
}*/

复制代码

jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.用jQ写左右运动的动画</title>
    <style>
        html,body,div{
            margin: 0;
            padding: 0;
        }
        body{
            position: relative;
        }
        #box{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
        #left,#right{
            width: 100px;
            height: 30px;
            line-height: 40px;
            text-align: center;
            background: yellow;
            border: none;
            position: absolute;
            top: 120px;
            user-select: none;/*控制页面的文字不能被选中*/
        }
        #left{
            left: 100px;
        }
        #right{
            left: 500px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<input type="text" id="left" value="向左走"><!--如果给input框加disabled="true"属性,就无法点击了-->
<input type="text" id="right" value="向右走">
<script src="jquery-1.11.3.js"></script>
<script>
var curEleOffsetL=$(window).width()-$('#box').outerHeight();
//console.log(curEleOffsetL);//当前元素的左边的距离
var changeL=0;
var timer;

function move(target){
    clearInterval(timer);
    var curL=parseFloat($('#box').css('left'));
    console.log(curL);
    if(curL<target){
        console.log(curL);
        timer=setInterval(()=>{
           curL+=5;
           console.log(curL);
           if(curL>=curEleOffsetL){
               $('#box').css('left',curEleOffsetL);
               clearInterval(timer);
               return;
           }
               $('#box').css('left',curL);
       },10)
    }

    if(curL>target){
         timer=setInterval(()=>{
           curL-=5;
           console.log(curL);
           if(curL<=changeL){
               $('#box').css('left',changeL);
               clearInterval(timer);
               return;
           }
                $('#box').css('left',curL);

       },10)
    }
}
$('#left').click(()=>{

    move(changeL);
});
$('#right').click(()=>{

    move(curEleOffsetL);
})
</script>
</body>
</html>
复制代码