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>
上面的实例通过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>
