Javascript.DOM编程艺术读书笔记(第10章）

最新推荐文章于 2021-09-19 11:13:23 发布

凡大喵

最新推荐文章于 2021-09-19 11:13:23 发布

阅读量286

点赞数

分类专栏：读书笔记文章标签： JavaScript学习读书笔记 JavaScript动画

本文链接：https://blog.csdn.net/weixin_44202459/article/details/88418283

版权

读书笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

其余章节链接

用JavaScript实现动画效果

CSS中position属性的属性值：static是默认值，有关将按照它们在标记里出现的先后顺序出现在浏览器窗口里；relative含义与static含义相似，区别在于属性值为relative的元素可以（通过应用float属性）从文档正常的显示顺序里脱离出来；属性值为absolute的元素可以摆放到容纳它的“容器”的任何位置，这个容器要么是文档本身，要么是一个有着fixed或absolute属性的父元素，它的显示位置由top、left、right和bottom等属性决定；fixed生成固定定位的元素，相对于浏览器窗口进行定位，显示位置由top、left、right和bottom等属性决定；为防止冲突，最好只使用top和bottom、left和right中的其中一个
setTimeout("function()",interval)，能够让某个函数在经过一段预定的时间之后才开始执行。第一个参数通常是一个字符串，其内容是将要执行的那个函数的名字；第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间后才开始执行第一个参数所给出的函数。在绝大多数情况下，把这个函数调用赋值给一个变量是一个好主意，如果想取消某个正在排队等待执行的函数，可以用用clearTimeout的函数来取消“等待执行”队列里的某个函数，这个函数需要的参数就是保存着某个setTimeout函数调用返回值的变量：

variable = setTimeout("function()",interval);//声明为全局变量，可以在函数外被取消
clearTimeout(variable);

parseInt(string)函数可以返回一个数字开头的字符串的整数，parseFloat(string)函数返回浮点数
CSS的overflow属性用来处理一个元素的尺寸超出其容器尺寸的情况。overflow有四个属性值：visible,不剪裁溢出内容，溢出部分可见；hidden，隐藏溢出内容，部分内容可见；scroll，隐藏溢出内容，显示滚动条以便查看内容的其它部分；auto，在发生内容溢出时才显示滚动条
element.property = value
，JavaScript可以创建一个特定元素的专属变量，这是一个介于局部变量和全局变量之间的变量
Math.ceil(number)，把任意浮点数向“大于”方向舍入为与之最接近的整数；Math.floor(number)，把任意浮点数向“小于”方向舍入为与之最接近的整数；Math.round(number)，把任意浮点数舍入为与之最接近的整数
动画效果demo：

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css" media="screen">    
    <title>动画</title>
</head>
<body>
    <div id="pic">
        <img src="images/bmw.jpg">        
    </div>
    <script src="js/animation.js"></script>
</body>
</html>

animation.js

function positionMessage(){
    if(!document.getElementById("pic")){
        return false;
    }
    var pic = document.getElementById("pic");
    pic.style.position = "absolute";
    pic.style.top = "10px";
    pic.style.left = "10px";
    moveElement("pic",400,400,20);
}
window.onload = positionMessage;

function moveElement(elementID,final_x,final_y,interval){
    if(!document.getElementById(elementID)){
        return false;
    }
    var elem = document.getElementById(elementID);
    if(elem.movemont){
        clearTimeout(elem.movement);//如果函数开始执行时已存在movement属性，复位
    }
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if(xpos == final_x && ypos == final_y){
        return true;
    }
    if(xpos<final_x){
        // xpos++;
        dist = Math.ceil((final_x-xpos)/10);
        xpos = xpos + dist;
    }
    if(xpos>final_x){
        // xpos--;
        dist = Math.ceil((final_x-xpos)/10);
        xpos = xpos + dist;
    
    if(ypos<final_y){
        // ypos++;
        dist = Math.ceil((ypos-final_y)/10);
        ypos = ypos - dist;
    }
    if(ypos>final_y){
        // ypos--;
        dist = Math.ceil((ypos-final_y)/10);
        ypos = ypos + dist;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval);
}