网上也有很多封装好的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、“动画队列”功能尚未实现，此版本为初级版本，疏漏之处还请多多指正。 #container{ border:1px solid #000; width:500px; height:400px;} #aa{ border:1px solid #000; width:100px; height:40px; background-color:#0f0; position:absolute; left:50px; top:50px; } #bb{ border:1px solid #000; width:500px; height:40px; margin-top:100px;} #cc{ border:1px solid #000; width:500px; height:40px;} dfdfddfsd gregreger [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　jQuery源码分析-03构造jQuery对象-源码结构和核心函数

作者：nuysoft/高云　QQ：47214707　EMail：nuysoft@gmail.com 毕竟是边读边写，不对的地方请告诉我，多多交流共同进步。本章还未写完，完了会提交PDF。 前记： 想系统的好好写写，但是会先从感兴趣的部分开始。 近>>>详细阅读

本文标题：JS简单动画封装浅析

地址：http://www.17bianji.com/kaifa2/JS/23950.html

 1/2    1