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 P1972】HH的项链
Luogu P1972 一开始非常naive随便打了个树状数组统计就交上去了,然后不出意料的爆零了-- 然后删一删改一改过了. 重点:对于区间[1,r]中重复出现的数,我们只需要关心最右边那一个是否在 ...
- day20191106
笔记: 一.#{}和${}的区别是什么 1)#{}是预编译处理,${}是字符串替换.2)Mybatis 在处理#{}时,会将 sql 中的#{}替换为?号,调用 PreparedStatement 的 ...
- Centos 7.x 内核升级
作者信息 邮箱:sijiayong000@163.com Q Q:601566386 Centos 7.x 内核升级 注意:这篇文章只在 CentOS 7.× 系列版本上验证过,其他 CentOS 版 ...
- 面试阿里被“吊打”，一问Spring三不知，半年后二战终拿下offer
Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台.Spring帮助开发者解决了开发中基础性的问题,使得开发人员可以专注于应用程序的开发. 近两年来,许多大厂在面 ...
- 第三章 学习Shader所需的数学基础（2）
目录 1.坐标空间 1.2 坐标空间的变换 @ 1.坐标空间 我们在以前渲染流水线中就接触了坐标空间的变换.例如,在学习顶点着色器流水线阶段时,我们说过,顶点着色器的最基本功能就是把模型的顶点坐标从模 ...
- 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU启动那些事（8）- 从Serial(1-bit SPI) NOR恢复启动
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的1-bit SPI NOR恢复启动. 在前几篇里痞子衡介绍的Boot Device都属于主动启动的 ...
- 基于H.ui.Admin UI模板的网站管理后台
最近接手一个跨境电商平台开发,客户侧重电商网站UI设计,对管理后台要求不高,由我们决定选哪一款后台模板.找来找去,感觉还是H.ui靠谱一些,主要是这个模板清爽,不需要过多选择.其他的流行后台模板也看了 ...
- 【Python3网络爬虫开发实战】6.4-分析Ajax爬取今日头条街拍美图【华为云技术分享】
[摘要] 本节中,我们以今日头条为例来尝试通过分析Ajax请求来抓取网页数据的方法.这次要抓取的目标是今日头条的街拍美图,抓取完成之后,将每组图片分文件夹下载到本地并保存下来. 1. 准备工作 在本节 ...
- luogu P3572 [POI2014]PTA-Little Bird
题目描述 从1开始,跳到比当前矮的不消耗体力,否则消耗一点体力,每次询问有一个步伐限制,求每次最少耗费多少体力 单调队列优化动态规划 #include<cstdio> #include&l ...
- UVA-11107 Life Forms(求出现K次的子串，后缀数组+二分答案)
题解: 题意: 输入n个DNA序列,你的任务是求出一个长度最大的字符串,使得它在超过一半的DNA序列中出现.如果有多解,按照字典序从小到大输入所有解. 把n个DNA序列拼在一起,中间用没有出现过的字符 ...