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

一、让对象动起来

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

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

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-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>

四、题外话

同一种武功，在不同的人身上会发挥出不同的效果。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yushengxiao/p/4758242.html