JS div匀速移动动画与变速移动动画代码实例
1.匀速移动代码
<!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 = 10;
step = target > current ? step : -step;
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 20);
}
</script>
</div>
</body>
</html>
2.变速移动代码
<!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);
}
}, 20);
}
</script>
</div>
</body>
</html>
common.js
/**
* 获取指定标签对象
* @param id 标签的id属性值
* @returns {Element}根据id属性值返回指定标签对象
*/
function my$(id) {
return document.getElementById(id);
}
以上所述是小编给大家介绍的JS div匀速移动动画与变速移动动画详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍javascript匀速动画和缓冲动画详解，包括了javascript匀速动画和缓冲动画详解的使用技巧和注意事项，需要的朋友参考一下 关于网页中的动画，在css3中我们已经可以使用一些属性快速的做出来，但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画。 使用js做动画最重要的一个函数就是setInterval函数，这里不再赘述，不懂可以直接百度用法。本文主要讲动画的
-
本文向大家介绍Android动画 实现开关按钮动画（属性动画之平移动画）实例代码，包括了Android动画 实现开关按钮动画（属性动画之平移动画）实例代码的使用技巧和注意事项，需要的朋友参考一下 Android动画 实现开关按钮动画（属性动画之平移动画），最近做项目，根据项目需求，有一个这样的功能，实现类似开关的动画效果，经过自己琢磨及上网查找资料，终于解决了，这里就记录下： 在Android
-
本文向大家介绍写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环相关面试题，主要包含被问及写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环时的应答技巧和注意事项，需要的朋友参考一下
-
动画速度 动画实际上就是一段时间内的变化，这就暗示了变化一定是随着某个特定的速率进行。速率由以下公式计算而来： velocity = change / time 这里的变化可以指的是一个物体移动的距离，时间指动画持续的时长，用这样的一个移动可以更加形象的描述（比如position和bounds属性的动画），但实际上它应用于任意可以做动画的属性（比如color和opacity）。 上面的等式假设了
-
我有一个nslayout约束，当用户按下按钮时，该约束应该会慢慢达到零。目前，当按下按钮时，它会自动快速达到零。我的代码不起作用。在这里。
-
本文向大家介绍原生JS实现匀速图片轮播动画，包括了原生JS实现匀速图片轮播动画的使用技巧和注意事项，需要的朋友参考一下 JS实现轮播图实现结果图： 需求： 1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片，定时轮播图片；鼠标在图片上时暂停 4 左右两侧可点击轮播图片 一、布局部分 html部分 css部分 JS部分 1这是匀速动画函数的封装 轮播图封装函数： 精