一、让对象动起来让一个对象动起来,我们的初衷并非是想让它跳跃到目的地,这样不符合我们的直观感受,我们需要的是,让它逐步的移动到目的地。现在的需求已经很明确,自创新函数之前,我们需要根据需求对它进行分析,进而生成相对应的函数。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
(#换成@)。