一、H5的简单布局

 <div class="box box1"></div><div class="box box2"></div>

二、css的布局

简易的布局出两个不同颜色的‘盒子’。

     <style type="text/css">*{padding:0px;margin:0px;}.box{width: 200px;height: 200px;background: blue;position: absolute;left:0px}.box2{background: red;margin-top: 210px;}</style>

三、获取元素

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

四、使用js来实现‘盒子’移动

可以使用函数封装，来实现，修改调用，不需要在代码中修改，可以减少出错的几率。

function myRun(box,h1,h2){  //封装函数
var myInter = setInterval(function(){
var offsetLeft = box.offsetLeft;
var num = h1;     //每次都移动h1个像素
var target = h2;  //一共移动的距离
if(offsetLeft==target){  //通过if来判断，到达了设定距离，就会删除间隔函数clearInterval(myInter);}else{box.style.left = offsetLeft+num+'px';//没有达到距离，一直赋值给‘盒子’左边距}},1000)}box1.onclick=function(){myRun(this,50,200); } //给‘盒子’设计点击事件，点击才会出现移动，this指向box1，里面是所调用的值，可以直接在里面修改，移动一次的距离，一共移动的距离

效果展示

五、使用js来实现缓动效果

依旧可以使用函数来封装，达到简洁的效果

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

function move(obj,sum){var liLi = setInterval(function(){var offsetLeft =obj.offsetLeft;var num  = (sum - offsetLeft)/10;num > 0 ?  Math.ceil(num):Math.floor(num);if(offsetLeft==sum){clearInterval(liLi);}else{obj.style.left = offsetLeft+num+'px';}},1000)}   box2.onclick=function(){move(this,200);}

效果展示

六、完整代码评论区自取

使用JavaScript 实现简单的移动和缓动的动画效果相关推荐

【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!D ...
HTML5+CSS3小实例：简单又好看的加载动画效果
HTML5+CSS3做一个简单又好看的加载动画效果,一个三色圆环转动,再加圆环内部文字转动,效果虽然简单,但第一次看到还是很惊艳的,最主要一点,代码真的超简单的. 效果: 源码: <!DOCTY ...
javascript实现鼠标移动两个小人的动画效果
动画效果效果说明:鼠标按住其中一个小人拖动,可以实现屏幕上两个小人的移动实现 1.HTML中的代码 <div class="background" @mousemove= ...
Javascript使用三大家族和事件来DIY动画效果相关笔记（五）
1.client家族 ◆box.clientWidth:表示盒子的宽度加padding ◆box.clientHeight:表示盒子的高度加padding ◆box.clientTop:表示盒子上边的 ...
JavaScript网页特效-浮现社会主义核心价值观文字动画效果
1.案例呈现用户在页面单击鼠标左键,页面浮现"富强"."民主"."文明"."和谐"."自由".&q ...
HTML5+CSS3+JavaScript 实现按键令小女孩移动，改变动画效果
素材图片 1.将小女孩图片截出来,在浏览器中居中显示,一个小女孩是96px <body><div class="box"></div> < ...
28 - JavaScript 特效：scroll家族和缓动动画
缓动动画三个函数缓慢动画里,我们要用到三个函数,这里先列出来: Math.ceil() 向上取整 Math.floor() 向下取整 Math.round(); 四舍五入缓动动画的原理缓动动画 ...
Javascript使用三大家族和事件来DIY动画效果相关笔记（一）
1.offset家族 ◆offsetWidth和offsetHeight表示盒子真实的宽度高度,这个真实的宽度包括四周的边框.四周的padding.及定义的宽度高度或内容撑开的高度和宽度,可以用来检 ...
html文字简单动画效果,CSS3一个简单的按钮悬停波浪文本动画效果
CSS 语言: CSSSCSS 确定 @import url("https://fonts.googleapis.com/css?family=Roboto:900"); body ...
父爱动画代码python_情人节锦囊：简单的python表白程序（动画效果）
今年这个特殊的情人节,如何优雅而又高大上地对自己的心爱女神表白? ? ? 猫老师给你送上锦囊,试试python表白的实现方式吧,是动画版的哦,保证可以如你所愿 ! ! ! 1.动态玫瑰花代码如下图: ...

使用JavaScript 实现简单的移动和缓动的动画效果

一、H5的简单布局

二、css的布局

三、获取元素

四、使用js来实现‘盒子’移动

效果展示

五、使用js来实现缓动效果

效果展示

六、完整代码评论区自取

使用JavaScript 实现简单的移动和缓动的动画效果相关推荐

最新文章

热门文章