> 웹 프론트엔드 > JS 튜토리얼 > JS 단순 애니메이션 encapsulation_javascript 기술에 대한 간략한 분석

JS 단순 애니메이션 encapsulation_javascript 기술에 대한 간략한 분석

WBOY
풀어 주다: 2016-05-16 17:59:32
원래의
1050명이 탐색했습니다.

网上也有很多封装好的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需刷新才能执行]
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿