Maison > interface Web > js tutoriel > JS简单动画封装浅析_javascript技巧

JS简单动画封装浅析_javascript技巧

WBOY
Libérer: 2016-05-16 17:59:32
original
1049 Les gens l'ont consulté

网上也有很多封装好的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需刷新才能执行]
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal