JS简单动画封装浅析_软件编程_内江振祥营销策划有限公司

JS简单动画封装浅析

发布时间：2026-01-11

点击量：

网上也有很多封装好的JS动画库，但大多因为功能过于完善，而至于代码量大动辄过千行，不宜在小项目中使用。这里自己封装了一个很轻量的动画库，主要功能都已实现。难免有疏漏之处，还请大家多多指教。

　　这里先说明一下功能和用法，以及注意点，随后是一个很简单的可运行示例。

用法及注意事项：
anim(elemId, cssObj, time, animType, funObj)
参数说明：
elemId （必选）需要施加动画效果的元素id
cssObj （必选）动画结束时的样式，对象类型，键值对形式，
其中键是能直接用在JS中的“驼峰”形式的css属性，而不是原来的css属性。
例如：{ marginLeft: '200px', top: '200px', borderWidth: '8px'}
time （必选）动画持续时间（单位ms）
animType （可选）默认为线性变化，代码里的Tween类型包含可选的其他参数
funObj （可选）如果要此选项，需要加入开始和结束时候执行的函数。
形如：{ el为elemId所指向的元素
start: function (el) { el.innerHTML = 'start!'; },
complete: function (el) { el.innerHTML = 'Completed!'; }
}

几点注意事项：
1、没有做低版本浏览器兼容，支持IE8+、FF、chrome、safari、opera
2、注意用能直接用在JS中的“驼峰”形式的css属性（本来应把css转“驼峰”形式，
但是基本所有JS程序员都能直接写出驼峰形式，所以没转）
3、如果需要把动画应用到绝对定位（position:absolute;）元素上，
需要注意在这些元素上设置CSS的方法。
例如：设置top和marginTop，对于绝对定位元素，应该设置top而不是marginTop，
更不应该将二者混合使用，因为二者的参考点是不一样的，同时设置很容易造成混乱。
所以，这里也不支持同时设置二者。
其他相似的同理（left和marginLeft、right和marginRight）
同时设置top和bottom、left和right也不支持。
4、引用了Tween缓动算法，支持线性、渐入渐出等多种变化方式。
5、“动画队列”功能尚未实现，此版本为初级版本，疏漏之处还请多多指正。

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

标签：# 都能 # 主要功能 # 装了 # 量大 # 要给 # 更不 # 都已 # 在这些 # 几点 # 很简单 # 很容易 # 动画封装 # 也有 # 是一个 # 而不是 # 持续时间 # 还请 # 用在 # 之处 # 也不 # 可选 # js学习心得_一个简单的动画库封装tween.js

上一篇：读JavaScript DOM编程艺术笔记

下一篇：mysql处理添加外键时提示error 150 问题的解决方

JS简单动画封装浅析

发布时间：2026-01-11

点击量：

返回

4008888355