zoukankan html css js c++ 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>

查看全文

相关阅读:
guava快速入门
 自旋锁解决StackOverflowError案例
 Java内存模型
 Java中sleep()与wait()区别
 wait()、notify()、notifyAll()与线程通信方式总结
 同步代码块、同步方法、锁总结
 如何把Go调用C的性能提升10倍？
记一次虚拟化环境下Windows IO性能的解析
 win7(64bit)使用mingw64配置gtkmm
你的深度工作，决定了你的后半生（刻意练习，最主要的竞争对手是无聊）

原文地址：https://www.cnblogs.com/yushengxiao/p/4742640.html