• JavaScript 实现简单的移动和缓动的效果

    目录

    一、HTML布局

    二、CSS布局

    三、JavaScript代码——移动

     四、JavaScript代码——缓动

    五、完整代码 

    一、HTML布局

    简单定义两个盒子，一个做移动效果、一个做缓动效果。

    1.     <div class="box box1">div>
    2. 	<div class="box box2">div>

    二、CSS布局

    为两个盒子定义宽高和背景色，随便做个效果哦！能看就管，

    1.

    三、JavaScript代码——移动

    1.获取元素

    把刚才html定义的元素获取过来在js中运用。

    1. var box1 = document.querySelector('.box1');
    2. var box2 = document.querySelector('.box2');

    2.封装函数实现移动

    num：定义盒子每次都移动h1个像素。

    target： 每次移动的距离。

    if判断：通过if来判断，到达了设定距离，就会删除间隔函数。

    box.style.left：没有达到距离，一直赋值给‘盒子’左边距。

    myRun：给盒子设计点击事件，点击才会出现移动，this指向box1，里面是所调用的值，可以直接在里面修改，移动一次的距离，一共移动的距离。

    1. function myRun(box,h1,h2){ 
    2. var myInter = setInterval(function(){
    3. var offsetLeft = box.offsetLeft;
    4. var num = h1;   
    5. var target = h2;  
    6. if(offsetLeft==target){  
    7. 		clearInterval(myInter);
    8. 	}else{
    9. 		box.style.left = offsetLeft+num+'px';
    10. 				}
    11. 	},1000)}
    12.     box1.onclick=function(){
    13.     myRun(this,50,200); }

    移动效果

     四、JavaScript代码——缓动

    与移动同理使用函数来封装，代码大致与js移动相同，中间判断与上文稍微有些不同，其中的含义是，第一次移动取移动距离的十分之一，接下来的每一次移动，都是取省下来还剩多少距离的十分之一，取整是为了，在无线接近于所设置的距离可以移动。

    1.  
    2.              function move(obj,sum){
    3.                 var liLi = setInterval(function(){
    4.                     var offsetLeft =obj.offsetLeft;
    5.                     var num  = (sum - offsetLeft)/10;
    6.                     num > 0 ?  Math.ceil(num):Math.floor(num);
    7.                     if(offsetLeft==sum){
    8.                         clearInterval(liLi);
    9.                     }else{
    10.                         obj.style.left = offsetLeft+num+'px';
    11.                     }
    12.                 },1000)
    13.              }   box2.onclick=function(){
    14.                     move(this,200);
    15.             }

    缓动效果

    五、完整代码 

    1.移动代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>移动title>
    7.     <style>
    8.         * {
    9.             padding: 0px;
    10.             margin: 0px;
    11.         }
    12.  
    13.         .box {
    14.             width: 200px;
    15.             height: 200px;
    16.             background: blue;
    17.             position: absolute;
    18.             left: 0px
    19.         }
    20.  
    21.         .box2 {
    22.             background: red;
    23.             margin-top: 210px;
    24.         }
    25.     style>
    26. head>
    27.  
    28. <body>
    29.     <div class="box box1">div>
    30.     <div class="box box2">div>
    31.     <script>
    32.         var box1 = document.querySelector('.box1');
    33.         var box2 = document.querySelector('.box2');
    34.         function myRun(box, h1, h2) {
    35.             var myInter = setInterval(function () {
    36.                 var offsetLeft = box.offsetLeft;
    37.                 var num = h1;
    38.                 var target = h2;
    39.                 if (offsetLeft == target) {
    40.                     clearInterval(myInter);
    41.                 } else {
    42.                     box.style.left = offsetLeft + num + 'px';
    43.                 }
    44.             }, 1000)
    45.         }
    46.         box1.onclick = function () {
    47.             myRun(this, 50, 200);
    48.         } 
    49.     script>
    50. body>
    51.  
    52. html>
    53.

    2.缓动效果

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>移动title>
    7.     <style>
    8.         * {
    9.             padding: 0px;
    10.             margin: 0px;
    11.         }
    12.  
    13.         .box {
    14.             width: 200px;
    15.             height: 200px;
    16.             background: blue;
    17.             position: absolute;
    18.             left: 0px
    19.         }
    20.  
    21.         .box2 {
    22.             background: red;
    23.             margin-top: 210px;
    24.         }
    25.     style>
    26. head>
    27.  
    28. <body>
    29.     <div class="box box1">div>
    30.     <div class="box box2">div>
    31.     <script>
    32.         var box1 = document.querySelector('.box1');
    33.         var box2 = document.querySelector('.box2');
    34.  
    35.         function move(obj, sum) {
    36.             var liLi = setInterval(function () {
    37.                 var offsetLeft = obj.offsetLeft;
    38.                 var num = (sum - offsetLeft) / 10;
    39.                 num > 0 ? Math.ceil(num) : Math.floor(num);
    40.                 if (offsetLeft == sum) {
    41.                     clearInterval(liLi);
    42.                 } else {
    43.                     obj.style.left = offsetLeft + num + 'px';
    44.                 }
    45.             }, 1000)
    46.         } box2.onclick = function () {
    47.             move(this, 200);
    48.         }
    49.  
    50.     script>
    51. body>
    52.  
    53. html>

  • 相关阅读:
    Elasticsearch-IndexTemplate和DynamicTemplate 有什么区别
    【记事本 】dom操作的类型
    Swagger
    学习笔记13--路径-速度分解法之汽车速度规划
    机器学习与深度学习的基本概念
    BLIP-2：冻结现有视觉模型和大语言模型的预训练模型
    vue中$nextTick的使用
    思维分析逻辑 3 DAY
    JAVA编程规范之ORM 映射
    ContentProvider与ContentResolver
  • 原文地址：https://blog.csdn.net/qq_65715980/article/details/125728020