一、让对象动起来
让一个对象动起来,我们的初衷并非是想让它跳跃到目的地,这样不符合我们的直观感受,我们需要的是,让它逐步的移动到目的地。
现在的需求已经很明确,自创新函数之前,我们需要根据需求对它进行分析,进而生成相对应的函数。
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>
二、自定义moveElement函数
根据上面的实例,我们可以进一步将其抽象化,让它适应所有元素的位置运动需求。
<!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 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 moveElement(elementID,finalX,finalY,interval){ var ele = document.getElementById(elementID); var xpos = ele.offsetLeft; var ypos = ele.offsetTop; if(xpos == finalX && ypos == finalY ){ return true; } if(xpos > finalX){ xpos--; } if(xpos < finalX){ xpos++; } if(ypos > finalY){ ypos--; } if(ypos < finalY){ ypos++; } ele.style.left = xpos + 'px'; ele.style.top = ypos + 'px'; movement = setTimeout(function(){moveElement(elementID,finalX,finalY,interval);},interval); } addonLoadEvent(function(){moveElement('myCat',200,200,10);}); </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>
三、moveElement函数的应用
上面的函数效果,很容易让我们想到,在很多年前,网络上常见的漂浮广告效果,尽管这样的效果很烦人,但是,它的出现确实容易让浏览者对其产生兴趣。
除了这类应用,还有目前比较常见的鼠标移动到某个元素对象上,在另外一个地方出现一个新的元素然后进行相应的变换效果。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>筱雨生 - 博客园</title> <!--[if lte IE 8]> <style> #myBlog li{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#049ba3,endColorstr=#049ba3); min-width:100px; } #myBlog li:hover{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C8049ba3,endColorstr=#C8049ba3); } </style> <![endif]--> <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; } #myBlog{ position:fixed; right:20px; bottom:20px; line-height:2em; } #myBlog li{ list-style:none; display:block; line-height:2em; height:2em; padding:10px; color:#fff; text-decoration:none; background:rgba(4,155,163,1.00); } #myBlog li:hover{ background:rgba(4,155,163,.8); } #myBlog li a{ color:#fff; text-decoration:none; } #showImg{ position:relative; width:400px; height:100px; overflow:hidden; } </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 moveElement(elementID,finalX,finalY,interval){ var ele = document.getElementById(elementID); var xpos = ele.offsetLeft; var ypos = ele.offsetTop; if(ele.movement) clearTimeout(ele.movement); if(xpos == finalX && ypos == finalY ){ return true; } if(xpos > finalX){ xpos--; } if(xpos < finalX){ xpos++; } if(ypos > finalY){ ypos--; } if(ypos < finalY){ ypos++; } ele.style.left = xpos + 'px'; ele.style.top = ypos + 'px'; ele.movement = setTimeout(function(){moveElement(elementID,finalX,finalY,interval);},interval); } function showSlide(){ var preview = document.getElementById('preview'); var myBlog = document.getElementById('myBlog'); var list = document.getElementById('linklist'); var links = list.getElementsByTagName('li'); var show = document.getElementById('showImg'); preview.style.position = 'absolute'; preview.style.left = '0'; preview.style.top = '0'; links[0].onmouseover = function(){ moveElement('preview',0,-75,0); } links[1].onmouseover = function(){ moveElement('preview',0,-150,0); } links[2].onmouseover = function(){ moveElement('preview',0,-220,0); } links[3].onmouseover = function(){ moveElement('preview',0,-290,0); } myBlog.onmouseout = function(){ moveElement('preview',0,0,0); } } addonLoadEvent(showSlide); </script> </head> <body> <div id="myBlog"> <ul id="linklist"> <li><a href="#">JavaScript</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">ActionScript</a></li> </ul> </div> <div style="position:fixed; bottom:145px; right:160px;"> <div id="showImg"><img src="http://images0.cnblogs.com/blog2015/24899/201508/261924477657654.png" alt="show images" id="preview" /></div> </div> </body> </html>
四、题外话
同一种武功,在不同的人身上会发挥出不同的效果。