javascript div元素弹性缓冲运动代码实例

快乐打工仔 分类:实例代码

弹性缓冲运动是一种比较人性化的效果,下面就通过代码实例做一下简单介绍。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
*{
  margin:0; 
  padding:0;
}
body{
  margin:5px auto; 
  text-align:center; 
  background:#f0f0f0;
}
#box{
  position:absolute; 
  top:20px;
  left:20px; 
  width:100px; 
  height:60px;
  border:1px solid #808;
}
#st{
  cursor:pointer; 
  background:#ccf; 
  margin:5px;
}
#st{
  display:block;
}
</style>
<script type="text/javascript">
var el=500;
var p=10;
var t=20;
 
function done(){
  var cl = parseInt(getStyle(box,'left'));
  if(cl<el){
    box.style.left = cl + Math.ceil((el-cl)/p) + 'px';
    setTimeout('done()', t);
  } 
  else {
    box.style.left = el + 'px';
    this.style.display = 'none';
  }
}
 
function getStyle( elem, name ){ 
  if (elem.style[name]){ 
    return elem.style[name]; 
  } 
  else if (elem.currentStyle) { 
    return elem.currentStyle[name]; 
  } 
  else if (document.defaultView && document.defaultView.getComputedStyle){
    name = name.replace(/([A-Z])/g,"-$1"); 
    name = name.toLowerCase(); 
    var s = document.defaultView.getComputedStyle(elem,""); 
    return s && s.getPropertyValue(name); 
  } 
  else { return null; } 
}
window.onload=function(){
  var st = document.getElementById('st');
  st.onclick=function(){done()}
}
</script>
</head>
<body>
<div id="box">
  <span id="st">查看效果</span>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).var el=500,声明一个变量并赋值500,它规定了left属性最大值。

(2).var p=10,声明一个变量并赋值为10,它用来进行计算每次执行的运动尺寸。

(3).var t=20,声明一个变量并赋值为20,它用来作为定时器函数执行延迟的时间。

(4).function done(){},此方法是实现缓冲运动的核心。

(5).var cl = parseInt(getStyle(box,'left')),获取元素当前的left属性值。

(6).if(cl<el){

  box.style.left = cl + Math.ceil((el-cl)/p) + 'px';

  setTimeout('done()', t);

} ,如果当前的left属性值小于最大值。

就继续设置元素的left属性值,因为el-cl是越来越小的,所以运动速度会越来越快。

然后使用递归方式不断执行done方法。

(7).else {

  box.style.left = el + 'px';

  this.style.display = 'none';

},否则的话

元素的left值设置为最大值。

然后隐藏当span元素。

(8).function getStyle( elem, name )此方法可以获取元素的指定样式属性值,具体可以参阅相关阅读。

二.相关阅读:

(1).parseInt()方法可以参阅javascript parseInt()函数一章节。

(2).Math.ceil()方法可以参阅javascript Math.ceil()一章节。

(3).setTimeout()方法可以参阅setTimeout()一章节。

(4).getStyle()方法可以参阅getComputedStyle()和currentStyle属性的用法一章节。

javascript div元素弹性缓冲运动代码实例

回复

我来回复
  • 暂无回复内容