JS---变速动画函数封装
变速动画函数封装
匀速动画：每次步数都是10 (var step=10;)
变速(缓动)动画：每次的步数是用当前位置和目标位置相减 var step=(target-current)/10;
代码如下:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
} div {
margin-top: 20px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
</head> <body>
<input type="button" value="移动到400px" id="btn1" />
<input type="button" value="移动到800px" id="btn2" />
<div id="dv">
<script src="common.js"></script>
<script>
//点击按钮移动div my$("btn1").onclick = function () {
animate(my$("dv"), 400);
};
my$("btn2").onclick = function () {
animate(my$("dv"), 800);
}; //变速动画函数 function animate(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style.left = current + "px";
if (current == target) {
//清理定时器
clearInterval(element.timeId);
}
//测试代码
console.log("目标位置:" + target + "，当前位置:" + current + "，步数:" + step);
}, 20);
} </script>
</div>
</body> </html>
JS---变速动画函数封装的更多相关文章
- js变速动画函数封装 回调函数及层级还有透明度
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { re ...
- js 变速动画函数
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ...
- 从零开始学 Web 之 BOM（三）offset，scroll，变速动画函数
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
- 原生JS实现动画函数的封装
封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...
- 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- 移动端滑屏全应用【一】cssHandler操作基础动画函数封装
前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样 ...
- 原生javascript 基础动画函数封装(二)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- javascript动画函数封装（升级版）
//把 任意对象 的 任意数值属性 改变为 任意的目标值 function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = ...
- javascript动画函数封装
function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var ...
随机推荐
- 【Luogu P3375】字符串匹配KMP算法模板
Luogu P3375 模式串:即题目中的S2所代表的意义 文本串:即题目中的S1所代表的意义 对于字符串匹配,有一种很显然的朴素算法:在S1中枚举起点一位一位匹配,失配之后起点往后移动一位,从头开始 ...
- 【NOIP2017】【Luogu P3956】【SPFA】棋盘
Luogu P3956 本题是一道简单的SPFA 具体看程序 #include<iostream> #include<cstdio> using namespace std; ...
- es3设置属性不能修改
/*es3*/ { var Person =function () { var data ={ name:'zs', sex:'男', age:18 } this.get=function (key) ...
- F#周报2019年第48期
新闻 拥抱可空引用类型 介绍Orleans 3.0 视频及幻灯片 组合的力量 关于.NET:探索新的用于.NET的Azure .NET SDK .NET设计审查:GitHub快速审查 FableCon ...
- nginx实现前后台分离部署
2.1 前后台分离部署 (一) 组网图 (二) 简要说明: 如标题所示,至于为什么要前后台分离部署,个人理解的原因有三 (一) 便于部署 前台代码由ngin ...
- Java 大黑话讲解设计模式 -- UML类图
目录 1.啥是UML类图? 2.UML类图有啥用? 3.正式理解UML类图 4.使用idea画第一个UML类图 5.类之间的关系图[必须牢记] 6.类之间的关系 6.1.依赖 6.2.泛化 6.3.实 ...
- 3、Docker 基础安装和基础使用 二
Docker 网络 启动了nginx容器,但却不知道从哪里进行访问nginx. 启动nginx容器,并附加网络映射 在启动nginx容器的时候,增加一个-P大写的P的参数 表示随机映射一个端口 [ro ...
- kubeadm配置高可用etcd集群
操作系统为ubuntu18 kubernetes版本为v1.15.1 k8s默认在控制平面节点上的kubelet管理的静态pod中运行单个成员的etcd集群,但这不是高可用的方案. etcd高可用集群 ...
- ViewGroup dispatchTouchEvent方法中 mFirstTouchTarget标志是否为空的含义
在ViewGroup dispatchTouchEvent方法中首次出现mFirstTouchTarget的语句为: if (actionMasked == MotionEvent.ACTION_DO ...
- 震惊！线上四台机器同一时间全部 OOM，到底发生了什么？
案发现场 昨天晚上突然短信收到 APM (即 Application Performance Management 的简称),我们内部自己搭建了这样一套系统来对应用的性能.可靠性进行线上的监控和预警的 ...