脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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实现倒计时时钟的示例代码

    js实现倒计时时钟的示例代码

    本篇文章主要是对js倒计时时钟的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • 原生JS实现的放大镜效果实例代码

    原生JS实现的放大镜效果实例代码

    放大镜大家在各大网站都能见到，下面小编给大家分享一段 ，代码是基于原生js实现的放大镜效果，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-10-10
  • 微信APP生命周期及页面生命周期示例详解

    微信APP生命周期及页面生命周期示例详解

    这篇文章主要为大家介绍了微信APP生命周期及页面生命周期当然示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
    2022-04-04
  • JS实现网页Div层Clone拖拽效果

    JS实现网页Div层Clone拖拽效果

    这篇文章主要介绍了JS实现网页Div层Clone拖拽效果,涉及JavaScript响应鼠标事件动态改变页面元素位置属性及层级属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • javascirpt实现2个iframe之间传值的方法

    javascirpt实现2个iframe之间传值的方法

    这篇文章主要介绍了javascirpt实现2个iframe之间传值的方法,涉及javascript针对iframe框架下的页面元素操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript 密码强度判断代码

    JavaScript 密码强度判断代码

    JavaScript 密码强度判断代码，其实就是利用了判断一些特殊符号，字符串长度等来实现判断。
    2009-09-09
  • 小程序如何写动态标签的实现方法

    小程序如何写动态标签的实现方法

    这篇文章主要介绍了小程序如何写动态标签的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 详解JavaScript跨域总结与解决办法

    详解JavaScript跨域总结与解决办法

    本篇文章主要介绍了JavaScript跨域，详细的总结了什么是跨域，并介绍了几种解决办法，感兴趣的小伙伴们可以参考一下。
    2016-10-10
  • 关于恒等于（===）和非恒等于（!==）

    关于恒等于（===）和非恒等于（!==）

    关于恒等于（===）和非恒等于（!==）...
    2007-08-08
  • JS实现关键词高亮显示正则匹配

    JS实现关键词高亮显示正则匹配

    这篇文章主要介绍了JS实现关键词高亮显示正则匹配功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06

最新评论