你的位置:首页 > 软件开发 > Java > JavaScript学习笔记——动画基础 3.2

JavaScript学习笔记——动画基础 3.2

发布时间:2015-08-27 12:00:08
一、让对象动起来让一个对象动起来,我们的初衷并非是想让它跳跃到目的地,这样不符合我们的直观感受,我们需要的是,让它逐步的移动到目的地。现在的需求已经很明确,自创新函数之前,我们需要根据需求对它进行分析,进而生成相对应的函数。1、逻辑分析首先,需要获取元素的初始位置,也就是元素的当 ...

一、让对象动起来

让一个对象动起来,我们的初衷并非是想让它跳跃到目的地,这样不符合我们的直观感受,我们需要的是,让它逐步的移动到目的地。

现在的需求已经很明确,自创新函数之前,我们需要根据需求对它进行分析,进而生成相对应的函数。

1、逻辑分析

首先,需要获取元素的初始位置,也就是元素的当前位置;

如果元素在没有到达目的地之前它的位置在逐步的改变,这个地方需要用到运算符,如++、--;

如果元素抵达目的地后,需要停止,也就是跳出函数本身;

如果需要在一定时间间隔之后这个元素才开始运动,我们需要用到setTimeout方法;

2、具体实例

<!doctype html><html><head><meta charset="utf-8"><title>筱雨生 - 博客园</title><style>body{  font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif,"Microsoft Yahei";  background:#fff;  color:#333;  min-height:1000px;}table{border-collapse:collapse;}caption{  padding:1em;}td{  width:10em;  padding:.5em;  border:1px solid #999;}#myCat{  position:fixed;  width:500px;  height:100px;  right:10px;  bottom:10px;}</style><script>function addonLoadEvent(func){  var oldonload = window.onload; // 把现有的window.onload事件处理函数的值存储到变量oldonload  if(typeof window.onload != 'function'){ // 如果这个处理函数上还没有绑定任何函数    window.onload = func; // 将这个函数绑定到window.onload事件  }else{    window.onload = function(){ // 如果这个处理函数已经绑定了函数,就把这个函数追加到指令的末尾      oldonload();      func();    }}}function stripeTables(){  if(!document.getElementsByTagName) return false;  var tables = document.getElementsByTagName('table');  var odd,rows;  for(var i=0; i<tables.length; i++){    odd = false;    rows = tables[i].getElementsByTagName('tr');    for(var j=0; j<rows.length; j++){      if(odd == true){      rows[j].style.backgroundColor = '#ffc';      odd = false;    }else{      odd = true;    }    }  }}addonLoadEvent(stripeTables);function hightTR(){  if(!document.getElementsByTagName) return false;  var hightRows = document.getElementsByTagName("tr");  for(var i=0; i<hightRows.length; i++){    hightRows[i].onmouseover = function(){      this.style.fontWeight = "700";    }    hightRows[i].onmouseout = function(){      this.style.fontWeight = "normal";    }  }}addonLoadEvent(hightTR);function moveElement(){  var ele = document.getElementById('myCat');  var xpos = ele.offsetLeft;  var ypos = ele.offsetTop;  if(xpos > 100){    xpos--;  }  if(xpos < 100){    xpos++;  }  if(ypos > 100){    ypos--;  }  if(ypos < 100){    ypos++;  }  if(xpos == 100 && ypos == 100 ){    return true;  }  ele.style.left = xpos + 'px';  ele.style.top = ypos + 'px';  movement = setTimeout('moveElement()',10);}addonLoadEvent(moveElement);</script></head><body><h1>筱雨生</h1><p>時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"><table width="300" border="0" cellspacing="0" cellpadding="0" id="myCat"><caption>我的博客分类</caption> <tbody>  <tr>   <td>Windows</td>   <td>iOS </td>   <td>Android</td>  </tr>  <tr>   <td>JavaScript</td>   <td>HTML </td>   <td>CSS</td>  </tr>  <tr>   <td>ActionScript</td>   <td>Animate</td>   <td>Others</td>  </tr> </tbody></table></div></body></html>

原标题:JavaScript学习笔记——动画基础 3.2

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。