jQuery动画效果的原生js

动画效果：

代码

动画

*边距：0；填充：0；}
。箱{宽度：400px；身高：300px；背景：# 000；保证金：40px汽车；颜色：# FFF；字体大小：18px；}；}

让 / /对象的样式规则，对currentstyle IE的使用
Function getStyle (obj, style) {
返回的对象。currentstyleobj。currentstyle {风格}：getcomputedstyle（obj，false）{风格}；
}
类似于jQuery——动画原生的js动画
动画函数（obj，stylejson，回调）{
ClearInterval（obj。定时器）；
打开定时器
obj。定时器= setInterval（）{（）函数（
所有的操作都已经完成了。
对于（VAR为在stylejson）{
1。接受当前属性值。
无功imov = 0；
透明度是小数，所以是单独的。
imov =为= = 'opacity' math.round（parseFloat（getstyle（obj为））* 100）：parseInt（getstyle（obj为））；

2。计算速度
var速度= 0；
速度=（stylejson {为} - imov / / / 8）；缓冲区，这也可以是一个固定值
速度=速度> 0math.ceil（速度）：Math.floor（速度）； / /区分透明和小数点之间，向上舍入和向下舍入

//3. 确定是否达到预定值。
如果（stylejson {为}！= imov）{
标志=假；
如果（styleName = = 'opacity）{ / /判断结果是否透明
obj。风格{为} =（imov +速度） / 100；
obj。风格。过滤器= 'alpha（透明度：+（imov +速度）+）；
其他{ }
obj。风格{为} = imov +速度+ 'px；
}
}
}
如果（标志）达到一个设置值，停止计时器回调。
ClearInterval（obj。定时器）；
如果（回调）{回调（）；}
}
}，30）
}
窗口。指针函数（）{
document.getelementbyid（'box）。Onclick =函数（）{
VaR这=这；
动画（o，{ 'width：'500}，函数（））{
动画（o，{ 'height：f'400}，{ alert（）函数（增加宽度）}））；
}）；
}

}

点击效果：增加弹出框高度的宽度> >

注意点

1。动画在停止原定时器之前，否则绑定多个对象会发生冲突。

2的ID。计时器是分开的，不能重叠。在这里我直接绑定的对象分配obj.timer

三.要确定动画的实现，全部是设置的值=标志，完成，然后停止计时器，然后执行回调函数。

对4.javaｓｃｒｉｐｔ数据类型转换

警戒（0.07 * 100）；

7.000000000000001 弹出

注：Javaｓｃｒｉｐｔ不区分存储数量和float类型之间，但被浮统一存储，使用Javaｓｃｒｉｐｔ的店数64位浮点格式由IEEE 754-2008标准定义的，是由IEEE 754定义：

decimal64对应的成型部分的长度是10，而小数部分的长度是16，那么默认的计算结果是7.0000000000000001。如果最后一个小数为0，则取1作为有效的数字标记。

5。传入的JSON数据不带Px，例如：'width{ '300px}，为了数值兼容的透明度，没想到好办法，有没有神的指导下…

6、定时器被缓冲了，而且它变化得越来越慢。它需要快速的效果或匀速。它只需要2个。计算速度做处理。

7。不兼容CSS3属性，只有兼容（宽度，高度，前，左，右，下，透明度）

8。获取对象样式信息，判断IE浏览器或Firefox浏览器，不同的待遇

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。