js盒子移动

黄色的海绵宝宝

已于 2022-07-05 14:45:06 修改

阅读量349

点赞数

文章标签：大数据

于 2022-07-05 14:20:23 首次发布

本文链接：https://blog.csdn.net/m0_70552412/article/details/125618414

版权

1.设置盒子颜色，规格

<style type="text/css">
            *{
                padding:0px;
                margin:0px;
            }
         .box{
             width: 200px;
             height: 200px;
             background: blue;
             position: absolute;
             left:0px
         }
         .box2{
             background: red;
             margin-top: 210px;
         }
         </style>
    </head>
    <body>

2.设置盒子发生事件

<!-- 盒子移动动画 -->
        <div class="box box1"></div>
        
        <div class="box box2"></div>
        <script type="text/javascript">
            var box1 = document.querySelector('.box1');
            var box2 = document.querySelector('.box2');
          
            //匀速运动  分装上面的代码块设计一个匀速运动的函数
            function move(obj,target){
                 obj.myInter = setInterval(function(){
                    var offsetLeft = obj.offsetLeft;
                    // console.log(offsetLeft);
                    var num = 10;//每次都移动10个像素
                    // var target = 100;
                    if(offsetLeft==target){
                        //清除定时器
                        clearInterval(obj.myInter);
                    }else{
                        obj.style.left = offsetLeft+num+'px';
                    }
                    
                },1000)
            }
            
            box1.onclick = function(){
                move(this,100);
            }
            
            // 缓动运动 有个滑动效果 每次移动的距离 由大到小改变
            // 思路  要移动100  可以先走40 再走30 再走20 再走10 这样移动就会越来越慢
            function slow(obj,target){
                obj.myInter = setInterval(function(){
                    var  offsetLeft = obj.offsetLeft;
                    var num = (target-offsetLeft)/10;
                    // Math.ceil向上取整 Math.floor向下取整
                    num>0?num = Math.ceil(num):num=Math.floor(num);
                    //注意 随着定时器的运行 num数值会由大到小发生变化
                    // 因为offsetLeft的值在变大
                    if(offsetLeft==target){
                        clearInterval(obj.myInter);//清除定时器
                    }else{
                        obj.style.left = offsetLeft+num+'px';
                    }
                },1000)
            }
            box2.onclick = function(){
                slow(this,100);
            }
        </script>

效果图：

3.核心：

var box1 = document.querySelector(".box1");

var box2 = document.querySelector(".box2");

box1.onclick = function(){

move(this,100);

}

box2.onclick = function(){

slow(this,100);

}

//匀速

function move(obj,target){

obj.myInter = setInterval(function(){

//第一步获取当前居左边的距离

var offsetLeft = obj.offsetLeft;

var num = 10;//走10px

if(offsetLeft==target){

clearInterval(obj.myInter);//清除定时器

}else{

obj.style.left = offsetLeft + num + "px";

}

},1000)

}

//缓动

function slow(obj,target){