脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS水平垂直移动

JS实现水平移动与垂直移动动画

 更新时间：2019年12月19日 14:50:03   作者：九月上  
这篇文章主要为大家详细介绍了JS实现水平移动与垂直移动动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现水平移动与垂直移动的具体代码，供大家参考，具体内容如下

水平移动分析：

可看成是一个物体的左边距变化。

比如：向右移动是左边距越来越大（数值为正），可调整物体的左边距来实现

向左移动是左边距越来越小（数值为负），可调整物体的左边距来实现

实际代码如下：

<style>
    *{padding: 0;margin: 0px;}
    #box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}
</style>
<body>
  <button id="btn">向右</button>
  <button id="btn1">向左</button>
  <div id="box"></div>
  <script>
    var box=document.getElementById('box');
    //速度
    var index=10;
    //定时器编号
    var b;
    //添加向右点击事件
    document.getElementById('btn').onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数
    }
    //添加向左点击事件
    document.getElementById('btn1').onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数
    }
    //box移动位置
    function getMove(index){
      //获取box的左距离
      var a=window.getComputedStyle(box,null).left;
      a=parseInt(a);//转换为数值
      box.style.left=a+index+'px'//计算box的左距离
    }
  </script>
</body>

垂直移动分析：

可看成是一个物体的上边距变化。

比如：向下移动是上边距越来越大（数值为正），可调整物体的上边距来实现

向上移动是上边距越来越小（数值为负），可调整物体的上边距来实现

实际代码如下：

<style>
    *{padding: 0;margin: 0px;}
    #box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}
</style>
<body>
  <button id="btn">向下</button>
  <button id="btn1">向上</button>
  <div id="box"></div>
  <script>
    var box=document.getElementById('box');
    //速度
    var index=10;
    //定时器编号
    var b;
    //添加向下点击事件
    document.getElementById('btn').onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数
    }
    //添加向上点击事件
    document.getElementById('btn1').onclick=function(){
      clearInterval(b);//清除上一个定时器执行的事件
      b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数
    }
    //box移动位置
    function getMove(index){
      //获取box的上距离
      var a=window.getComputedStyle(box,null).top;
      a=parseInt(a);//转换为数值
      box.style.top=a+index+'px'//计算box的上距离
    }
  </script>
</body>

有补充得请留言！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js中forEach的用法之forEach与for之间的区别

    js中forEach的用法之forEach与for之间的区别

    这篇文章主要介绍了js中forEach的用法之forEach与for之间的区别，forEach() 调用数组的每个元素，并将元素传递给回调函数，下面更多详细介绍需要的小伙伴可以参考一下

    2022-03-03
  • Javascript中return的使用与闭包详解

    Javascript中return的使用与闭包详解

    Javascript中return与闭包对大家来说应该都不陌生，下面本文就给大家介绍了Javascript中return的使用与闭包。文中给出了详细的示例代码，对大家的理解和学习具有一定的参考借鉴价值，感兴趣的朋友们下面来一起看看吧。
    2017-01-01
  • js 返回时间戳所对应的具体时间

    js 返回时间戳所对应的具体时间

    返回unix时间戳所对应的具体时间的代码
    2010-07-07
  • js 增强型title信息提示效果

    js 增强型title信息提示效果

    js操作div仿title提示信息效果,增强型title信息提示，效果不错。
    2010-06-06
  • JavaScript中?. 和??分别是什么详解

    JavaScript中?. 和??分别是什么详解

    在项目中我们往往要做很多很多的空值判断进行容错处理,往往伴随着三目运算、与或、if else来使用,下面这篇文章主要给大家介绍了关于JavaScript中?. 和??分别是什么的相关资料,需要的朋友可以参考下
    2023-02-02
  • Spring mvc 接收json对象

    Spring mvc 接收json对象

    这篇文章主要介绍了Spring mvc 接收json数据的相关资料,需要的朋友可以参考下
    2015-12-12
  • 详解JS函数重载

    详解JS函数重载

    本文主要介绍了利用JavaScript中的特殊对象arguments来模拟函数重载的解决方案，非常的实用，给需要的小伙伴参考下
    2014-12-12
  • uniapp 微信默认地图选点功能实现

    uniapp 微信默认地图选点功能实现

    这篇文章主要介绍了uniapp 微信默认地图选点功能实现,本文通过实例代码效果图展示给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • 微信小程序如何实现数据共享与方法共享详解

    微信小程序如何实现数据共享与方法共享详解

    这篇文章主要给大家介绍了关于微信小程序如何实现数据共享与方法共享的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • 判断ie的两种简单方法

    判断ie的两种简单方法

    判断ie想必大家都会写吧，如何将判断条件变得简单呢，也许大家并不是很清楚，感兴趣的大家可以参考下本文，或许会有所收获
    2013-08-08

最新评论