包的动态功能，慢慢的JS旋转木马图
其实还有一个旋转木马功能很轻松的功能包，如果地图是一个传送带运行的车，那么慢动功能就是它的引擎了，今天这篇文章将带你从简单到复杂，慢动自己的功能包。从需求的角度来看，我们首先给出了一个简单的需求：
1，我想我们从开始到200px合适地点页面移动一个箱子，我能怎么办呢
分析uff1a
1）我们需要知道的是盒子，这可以从offsetleft属性获得；
2）制作盒子以恒定的速度移动，setInterval必须需要JS。
3）让盒子往右边跑也就是要改变盒子与左边的起始点之间的距离，左边的余量，左边的位置，在这里我选择改变左边的绝对位置；
4）逃避200px的开始，我们将停止使用CSS样式。
然后代码直接在
文件
{ *
保证金：0；
填充：0；
}
{ div
位置：绝对；
上图：50px；
宽度：100px；
身高：100px；
背景颜色：红色；
}
输入{
宽度：100px；
身高：30px；
颜色：# FFF；
背景颜色：黄绿色；
}
访问元素（有小细节，如果Id被设置为元素，即使没有使用元素的方法也可以通过ID元素名哦~你可以自己试试）
VaR建立document.queryselector（输入的），
DV = document.queryselector（'div）；
添加一个单击事件
Btn.addEventListener（听到咔哒声，函数（）{（）{
var定时器
currentdistance = dv.offsetleft，从父 / /箱的距离
步骤= 8，每一个距离的变化
目标= 200；目标距离
定时器= setInterval（）{（）函数（
currentdistance =步； / /当前距离= A +改变当前的距离
如果（（（目标currentdistance）<步）{
currentdistance =目标； / /如果目标距离和距离小于距离发生变化，那么我们可以让距离等于目标距离，防止箱停止错误
ClearInterval（定时器）； / /清除定时器
定时器= null； / /定时器解绑，释放内存
}
dv.style.left = currentdistance + 'px '； / /核心，改变目前距离左边的框
}，17）
}）
2。实现了初步运动的效果，提高了需求量。
后箱移动到200px位置，我们必须把盒子搬到400px位置
分析uff1a
1), at this time, there are two buttons to click, a movement to 200px, a movement to 400px
2）虽然有两项运动，但它们所使用的功能都是一样的。他们从一点移动到另一点。因此，我们考虑在一个函数中打包1个函数来重用。
代码~
文件
{ *
保证金：0；
填充：0；
}
{ div
位置：绝对；
上图：50px；
宽度：100px；
身高：100px；
背景颜色：红色；
}
输入{
宽度：100px；
身高：30px；
颜色：# FFF；
背景颜色：黄绿色；
}
包函数框和目标距离是不确定的，我们可以将它们作为参数传递。
函数动画（标签，目标）{
var定时器= null，
currentdistance = tag.offsetleft，
步骤5；
步= currentdistance目标的步骤：<步； / /步骤200确定的正面和负面的，400的增加，200是减少400
定时器= setInterval（）{（）函数（
如果（Math.abs（currentdistance目标）> Math.abs（步））{ / /这里将判断条件稍有变化，采用绝对值比较。
currentdistance =步； /
tag.style.left = currentdistance + 'px；
{ }人
tag.style.left =目标+ 'px ' / /当目前的距离和目标的距离之间的差值小于步距的变化时，我们直接把箱子移动到目标的距离。
ClearInterval（定时器）；
计时器= null；
}
}，17）
}
Var BTNs = document.queryselectorall（输入的），
DV = document.queryselector（'div）；
BTNs { 0 }。addEventListener（听到咔哒声，函数（）{（）{
动画（DV，200）；
}）
BTNs { 1 }。addEventListener（听到咔哒声，函数（）{（）{
动画（DV，400）；
}）
3，箱子来回运动的功能我们很好的包，但是我们想滚动滚动条的图形，它不是移动的，而是开始非常接近滚动块，在完成，速度和逐渐减少。
要求：让盒子慢（即变速）。
代码~
函数动画（标签，目标）{
var定时器= null；
定时器= setInterval（）{（）函数（
无功currentdistance = tag.offsetleft，
步=（目标currentdistance） / / / 5；目标距离、距离差除以5来达到变速运动的需要，因为每个自定义步进驱动器应改为定时器
一步一步> 0 = math.ceil（步骤）：Math.floor（步）； / /这里如果currentdistance定时器外部声明不会写，如果在定时器的声明，因为该offsetleft积分特性，舍入步骤
如果（Math.abs（currentdistance目标）> Math.abs（步））{
currentdistance =步；
tag.style.left = currentdistance + 'px；
{ }人
tag.style.left =目标+ 'px
ClearInterval（定时器）；
计时器= null；
}
}，17）
好了，一个旋转木马到最基本的慢功能~
一个更完整的减速功能被添加在这里：它有一个更全面的功能，可以同时改变多个样式。 U3000 U3000
功能perfectanimate（标签，obj，FN）三参数{ / /，盒子，对象（你可以将多个属性），回调函数（在实施后可以执行自定义函数）
ClearInterval（标签。定时器）； / /这里将定时器为标签的标签属性可以保存多个调用定时器函数删除。
tag.timer = setInterval（）{（）函数（
var标志=真；
（VaR K为OBJ）{
因为并不是所有属性都是PX单元，所以这里设置为判断。
如果（K = = 'opacity）{
无功currentdistance = getstyle（标签，K）×100，
目标= obj { k }×100，
Step = (target - currentDistance) / 10;
一步一步> 0 = math.ceil（步骤）：Math.floor（步）；
currentdistance =步；
标签。风格{ K } = currentdistance / 100；
否则如果}（K = = 'zindex）{
标签。风格{ K } = {克} obj；
{其他
无功currentdistance = parseInt（getstyle（标签，K）| |）0，
目标= obj { k }，
步=（目标currentdistance） / 10；
一步一步> 0 = math.ceil（步骤）：Math.floor（步）；
currentdistance =步；
标签。风格{ K } = currentdistance + 'px；
}
如果（目标）！= currentdistance）{
标志=只要没有移动属性完成，就不会清除计时器。
}
}
如果（标志）{
ClearInterval（标签。定时器）
FN（FN）；所有定时器超时，执行回调函数，避免短路操作不通过回调函数不出错。
}
}，17）
}
获得兼容函数样式，慢移动函数的上述依赖关系
功能getstyle（标签，ATTR）{
如果（标签。currentstyle）{
返回标签。currentstyle {属性}；
{人}
返回getcomputedstyle（标签，null）{属性}；
}
}
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。