JS教程:Javascript实现缓动效果

冰鉴186

冰鉴186

2016-02-20 00:59

下面是个JS教程:Javascript实现缓动效果教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

缓动,学名为Tween,缓冲移动的简称。要想页面内容切换起来舒服,就使用淡入淡出特效,要想让页面元素动起来自然,就要使用缓动效果。这两个混合起来,可以衍生多种特效的。感谢Flash开发人员为我们做了那么多先行研究,我们直接把它们拆出来装在各种菜单与相册中。我们先从最简单的东西做起,加速与减速。

既然是缓动,它就一定涉及以下概念:距离,时间与速度。我们可以想象存在一条直线L,点A与点B就是L的起点与终点,有一个点C在直线L上移动,从点A到点B。所需的时间通常都是未知,但速度我们一定要制定。看下面的图,我们想让绿色的方块在淡紧色的滑动带上移动。滑动带左上角就相当于点A,右上角就相当于B点,方块的左上角就相当于点C,移动距离为两者的宽度之差。由于我们移动的物体是存在宽度,也就是说点C永远不可能与点B重合。但一个准确的目的地(为了方便,我们把它称之为点D)是必须的,我们一定要计算它出来。因为在加速运动中,点C随时可能超过点D,当点超过它时,我们就要终止此移动,并把点C拉回到点D上。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

为了获取它们在页面上的坐标与尺寸,getCoords()与getStyle()又到出场时间了。对不起,我实在没有意思来炫耀我的函数。更何况getStyle()被砍去了不少东西,威力没有以前那么强大。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

//辅助函数1
var getCoords = function(el){ 
  var box = el.getBoundingClientRect(), 
  doc = el.ownerDocument, 
  body = doc.body, 
  html = doc.documentElement, 
  clientTop = html.clientTop || body.clientTop || 0, 
  clientLeft = html.clientLeft || body.clientLeft || 0, 
  top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop, 
  left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft 
  return { 'top': top, 'left': left };
};
//辅助函数2
var getStyle = function(el, style){ 
  if(!+"v1"){ 
    style = style.replace(/-(w)/g, function(all, letter){ 
      return letter.toUpperCase(); 
    }); 
    var value = el.currentStyle[style]; 
    (value == "auto")&&(value = "0px" ); 
    return value; 
  }else{ 
    return document.defaultView.getComputedStyle(el, null).getPropertyValue(style) 
  }
}

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

展开更多 50%)
分享

猜你喜欢

JS教程:Javascript实现缓动效果

Web开发
JS教程:Javascript实现缓动效果

JavaScript Tween算法及缓动效果

Web开发
JavaScript Tween算法及缓动效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Flash缓动效果

flash教程
Flash缓动效果

JavaScript/JS实现图象淡出效果

Web开发
JavaScript/JS实现图象淡出效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

javascript:JS实现的滑动展开与折叠效果

Web开发
javascript:JS实现的滑动展开与折叠效果

JavaScript/JS实现自动跳出Frame

Web开发
JavaScript/JS实现自动跳出Frame

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

怎么让网页全屏显示?

怎么让网页全屏显示?

防止U盘私自拷贝文件保护信息安全

防止U盘私自拷贝文件保护信息安全
下拉加载更多内容 ↓