JavaScript与CSS — 实现动画

前端技术 everyinch 1004℃ 0评论

有了构建动态页面的基本能力,接下来实现Web应用程序中最流行、最显著的效果:动画。巧妙地使用动画可以为用户提供十分有用的反馈,可以把用户的注意力吸引到指定的元素上来。
滑动
第一个动画是把一个隐藏元素(display:none)显示出来。即将指定的元素在短时间内随着高度的增加而逐步显现。使用滑动效果,提供了更为平滑的用户视觉体验。

function slideDown( elem ) {
// 从0高度开始滑动
elem.style.height = ‘0px’;

// 显示元素( 高度为0所以元素不可见)
show( elem );

// 找到元素完整的潜在高度
var h = fullHeight( elem );

// 在1秒内执行一个20帧的动画
for ( var i = 0; i <= 100; i += 5 ) { //能够正确引用 i 变量的闭包 var pos = i; // 设置 timeout 以让它能在指定的时间点运行 setTimeout(function(){ // 设置元素的新高度 elem.style.height = ( pos / 100 ) * h ) + "px"; }, ( pos + 1 ) * 10 ); })(); } } [/code] 渐显 渐显与滑动效果类似,只不过利用了setOpacity()函数改变了透明度而不是高度。这个函数显示一个隐藏的元素并使透明度从0(完全透明)到100%(完全不透明)逐渐显现。 [code lang="js"] function fadeIn( elem ) { // 从 0 透明度开始 setOpacity( elem, 0 ); // 显示元素(因为透明度为0所以不可见) show( elem ); // 在1秒内执行一个20帧的动画 for ( var i = 0; i <= 100; i += 5 ) { // 能够正确引用 i 变量的闭包 (function(){ var pos = i; // 设置 timeout 以让它能在指定的时间点运行 setTimeout(function(){ //设置元素的新透明度 setOpacity( elem, pos ); }, ( pos + 1 ) * 10 ); })(); } } [/code]



转载请注明:陈童的博客 » JavaScript与CSS — 实现动画

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量