你的位置:首页 > Java教程

[Java教程]JavaScript学习笔记——动画基础 3.1

一、对象的位置

通过JavaScript让对象动起来,首先应该先确定它的初始位置,可以通过外部CSS或者在执行体内设置,紧接着,通过JavaScript的触发事件来改变它的初始位置,从而形成一个动的效果。

<!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;}#myTab{  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 tabPos(){  if(!document.getElementById) return false;  if(!document.getElementById('myTab')) return false;  var myEle = document.getElementById('myTab');  myEle.onmouseover = function(){    myEle.style.position = 'fixed';    myEle.style.right = '20px';    myEle.style.bottom = '10px';  }  myEle.onmouseout = function(){    myEle.style.position = 'fixed';    myEle.style.right = '10px';    myEle.style.bottom = '10px';  }}addOnLoadEvent(tabPos);</script></head><body><h1>筱雨生</h1><p>時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"><table width="300" border="0" cellspacing="0" cellpadding="0" id="myTab"><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>

尽管这个元素可以动了,但是视觉效果并不是很好,需要进一步的处理。

二、时间的控制

1、setTimeout函数

语法:setTimeout('function', milisec);

其中function是要调用的函数,milisec是在执行代码前需等待的毫秒数。

通过下面这个实例可以了解setTimeout函数的用法。

<!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;}#myTab{  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 moveTabPos(){  if(!document.getElementById) return false;  if(!document.getElementById('myTab')) return false;  var myEle = document.getElementById('myTab');  myEle.style.position = 'fixed';  myEle.style.right = '50px';  myEle.style.bottom = '50px';}function tabPos(){  if(!document.getElementById) return false;  if(!document.getElementById('myTab')) return false;  var myEle = document.getElementById('myTab');  myEle.style.position = 'fixed';  myEle.style.right = '10px';  myEle.style.bottom = '10px';  movement = setTimeout('moveTabPos()',5000);  }addOnLoadEvent(moveTabPos);addOnLoadEvent(tabPos);</script></head><body><h1>筱雨生</h1><p>時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"><table width="300" border="0" cellspacing="0" cellpadding="0" id="myTab"><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>

View Code

上面的实例通过moveTabPos()和tabPos()两个函数实现了一个元素从一个位置延迟5秒后移动到另外一个位置的动画效果。

2、clearTimeout函数

语法:clearTimeout(value_of_settimeout);

value of settimeout是setTimeout函数执行后返回的值,一般我们用variable来把它存储起来。

根据上面的例子稍作了修改,我们来了解一下clearTimeout函数的用法。

<!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;}#myTab{  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 moveTabPos(){  if(!document.getElementById) return false;  if(!document.getElementById('myTab')) return false;  var myEle = document.getElementById('myTab');  myEle.style.position = 'fixed';  myEle.style.right = '50px';  myEle.style.bottom = '50px';}function tabPos(){  if(!document.getElementById) return false;  if(!document.getElementById('myTab')) return false;  var myEle = document.getElementById('myTab');  myEle.style.position = 'fixed';  myEle.style.right = '10px';  myEle.style.bottom = '10px';}movement = setTimeout('moveTabPos()',3000);  addOnLoadEvent(moveTabPos);addOnLoadEvent(tabPos);function stopMove(){  clearTimeout(movement);}</script></head><body><h1>筱雨生</h1><p>時光飛逝,莫讓網絡蹉跎了歲月</p><button onClick="stopMove()">点击取消</button><div id="myBlog"><table width="300" border="0" cellspacing="0" cellpadding="0" id="myTab"><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>