首页 > 移动平台 > 详细

实现盒子水平移动

时间:2019-08-06 22:45:47      阅读:115      评论:0      收藏:0      [点我收藏+]
/*
参数:
element 要运动的元素
targetValue 目标值 数字
speed 速度 数字
*/
function move(element, targetValue, speed) {
// 清除旧的定时器,flag在此表示的是上一次定时器的标识
clearInterval(element.flag);
// 动画
// 开启一个定时器(创建一个定时器)
element.flag = setInterval(function () {
// 获取盒子原有的位置
var v = element.offsetLeft;
// 判断是否到达目标
if (v == targetValue) {
// 停止定时器
clearInterval(element.flag);
// console.log(‘定时器还在执行...‘);
// 向后不要执行了
return;
}
// 更新变量的值
// 检测最后一步和速度计算是否能够到达目标,若差值小于速度,则说明是最后一步,并且最后一步不能再去和speed计算
if (Math.abs(targetValue - v) < speed) {
element.style.left = targetValue + ‘px‘;
} else {
if (targetValue > v) {
v = v + speed;
} else {
v = v - speed;
}
// 重新设置盒子的left样式属性值
element.style.left = v + ‘px‘;
}

 

}, 10);
}

实现盒子水平移动

原文:https://www.cnblogs.com/lljun/p/11312128.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!