Javascript特效：简单的匀速平移动画

知识点

一般实现动画的两种方式,定位和margin-left

运行效果

点击开始开始运动

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{height: 100px;width: 100px;background-color: red;}</style>
</head>
<body>
<button id="btn">开始动画</button>
<div id="box"></div>
<script>window.addEventListener('load',function (ev) {// 1. 获取需要的标签var btn = document.getElementById('btn');var box = document.getElementById('box');var intervalID = null, begin = 0, step = 50, target = 600;// 2. 事件触发btn.addEventListener('click',function (ev1) {// 2.1 清除定时器clearInterval(intervalID);// 2.2 设置定时器intervalID = setInterval(function () {// 改变起始值begin += step;// 判断if (begin >= target){begin = target;clearInterval(intervalID);}// 改变盒子box.style.marginLeft = begin + 'px';}, 50);});});
</script>
</body>
</html>

封装成函数的时候，根据不同人的思想，可以有不同的封装方式。

封装版本1.0

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{height: 100px;width: 100px;background-color: red;}</style>
</head>
<body>
<button id="btn">开始动画</button>
<div id="box"></div>
<script>window.addEventListener('load',function (ev) {linearAnimation('btn','box',50,800)});function linearAnimation(btnID, boxID, step, target){var btn = document.getElementById(btnID);var box = document.getElementById(boxID);var intervalID = null, begin = 0, step_len = step||0 ;btn.addEventListener('click',function (ev1) {clearInterval(intervalID);intervalID = setInterval(function () {begin += step_len;if (begin >= target){begin = target;clearInterval(intervalID);}box.style.marginLeft = begin + 'px';}, 50);});}
</script>
</body>
</html>

封装版本2.0

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{height: 100px;width: 100px;background-color: red;}</style>
</head>
<body>
<button id="btn">开始动画</button>
<div id="box"></div>
<script>window.addEventListener('load',function (ev) {document.getElementById('btn').onclick = function (ev1) {linearAnimation('box',50,800);}});function linearAnimation( boxID, step, target){var box = document.getElementById(boxID);var intervalID = null, begin = 0, step_len = step||0 ;clearInterval(intervalID);intervalID = setInterval(function () {begin += step_len;if (begin >= target){begin = target;clearInterval(intervalID);}box.style.marginLeft = begin + 'px';}, 50);}
</script>
</body>
</html>

Javascript特效：简单的匀速平移动画相关推荐

原生JavaScript实现简单平移动画
1. 知识点 : 计时器 (serInterval && clearIntreval ) js获取到CSS样式 (getComputedStyle && cur ...
Javascript特效之动画下拉效果
Javascript特效之动画下拉效果今天来看看怎么实现好看的动画下拉框效果. 效果图: 点击按钮会呈现动画效果下拉获取缩回. 实现思路: 就是在div里面加一个p元素存放文字.在点击按钮是使用jq ...
Android学习笔记——用ObjectAnimator平移动画仿微信表情雨的简单实现
最近需要实现类似微信聊天界面输入文字命中关键字出现Emoji 表情雨的动画效果,自己试着实现了一下,主要就是用 ObjectAnimatior 的平移动画,用随机函数控制每个Emoji 的横,纵 ...
11种控制内容展示的JavaScript特效和技巧
交付信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容. 不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它.本文里面,我们为你收 ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
Javascript特效之删除内容效果
Javascript特效之删除内容效果今天分享一个网页经常会用到的删除内容效果即想列表一样的每列数据实现单列删除效果. 效果图: 点击右上角的X后该内容会慢慢删除. 实现思路:实际上很简单,就是在该 ...
Android平移补间动画,Android 补间动画之平移动画TranslateAnimation
Android动画系列博客导航: 1.介绍: Android补间动画之平移动画,在实际的开发过程中,其实有好多地方需要用到平移动画,这是对于平移动画的简单介绍. 2.属性 duration 时间 f ...
java script特效_通过JavaScript特效控制内容展示的11种方法
通过JavaScript特效控制内容展示的11种方法交互信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容.以下是百分网小编搜索整理的通过JavaScri ...
android image 位移动画_「translateanimation」Android 补间动画之平移动画TranslateAnimation - seo实验室...
translateanimation 博客导航: 1.介绍: Android补间动画之平移动画,在实际的开发过程中,其实有好多地方需要用到平移动画,这是对于平移动画的简单介绍. 2.属性 durati ...
Activity平移动画
Activity平移动画效果图添加动画文件在res下添加anim文件夹,在anim下添加几个动画文件,分别是进入和退出的动画时间和移动距离,属性很简单,一看就懂,不磨叽了. tran_next_ ...

Javascript特效：简单的匀速平移动画

知识点

运行效果

代码

封装成函数的时候，根据不同人的思想，可以有不同的封装方式。

封装版本1.0

封装版本2.0

Javascript特效：简单的匀速平移动画相关推荐

最新文章

热门文章