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 相关文章推荐
jquery动态添加option示例
Dec 30 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 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
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python基于phantomjs实现导入图片
2016/05/13 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python3列表List入门知识附实例
2020/02/09 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
先进班级集体事迹材料
2014/01/30 职场文书
护理专业自荐书
2014/06/04 职场文书
房屋转让协议书
2014/10/18 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
浅谈怎么给Python添加类型标注
2021/06/08 Python