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


Posted in Javascript onDecember 19, 2019

本文实例为大家分享了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>

有补充得请留言!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
Ext 表单布局实例代码
Apr 30 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 #Javascript
d3.js实现图形拖拽
Dec 19 #Javascript
d3.js实现图形缩放平移
Dec 19 #Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 #Javascript
echarts实现折线图的拖拽效果
Dec 19 #Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 #Javascript
Echarts实现单条折线可拖拽效果
Dec 19 #Javascript
You might like
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
PHP临时文件的安全性分析
2014/07/04 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
实用求职信范文分享
2013/12/25 职场文书
安全标准化实施方案
2014/02/20 职场文书
大学军训感言400字
2014/03/11 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python