Javascript Dom编程艺术读书笔记（六）

最新推荐文章于 2021-04-03 16:06:18 发布

eye_water

最新推荐文章于 2021-04-03 16:06:18 发布

阅读量250

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/eye_water/article/details/78089204

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用Javascript实现动画效果
之前已经提到能够用DOM来改变网页的显示效果，但是打开网页后网页能够瞬间显示被改变之后的效果。如果想要实现动画效果，就应该为改变页面效果的函数设置一个“冷却时间”，等函数“冷却”好后再次执行这个函数。这样多执行几次函数，执行一次函数只改变一点，再为函数设置一个“冷却时间”就可以实现动画效果了。
如何为函数设置“冷却时间”？Javascript提供了一个setTimeout函数，第一个参数是函数名，第二个参数就是你想要设置的”冷却时间“了：

setTimeout（"function", interval)

在网上找一张”滑稽“图片，存入image文件中函数如果图片太大可以写一个python脚本把它缩小一点。
编写html源码：

<!DOCTYPE html>
<html lang="len">
<head>
    <meta charset="utf-8">
    <title>Message</title>
</head>
<body>
    <img src="image/huaji.bmp" id="message1" />
    <img src="image/huaji.bmp" id="message2" />
    <script src="scripts/addLoadEvent.js"></script>
    <script src="scripts/positionMessage.js"></script>
    <script src="scripts/moveElement.js"></script>
</body>
</html>

有了html源码，就可以用JavaScript搞事情了。

function positionMessage() {
    if(!document.getElementById) return false;
    if(!document.getElementById("message1")) return false;
    /*定位到图片*/
    var elem = document.getElementById("message1");
    /*为图片设置其在页面的位置*/
    elem.style.position = "absolute";
    elem.style.left = "10px";
    elem.style.top = "100px";
    /*调用moveElement函数来改变图片在页面的位置*/
    moveElement("message1", 100, 150, 20);
    if(!document.getElementById("message2")) return false;
    var elem = document.getElementById("message2");
    elem.style.position = "absolute";
    elem.style.left = "210px";
    elem.style.top = "100px";
    moveElement("message2", 300, 150, 20);
}
addLoadEvent(positionMessage);

接着再编写moveElement函数：

第一个参数是img标签的id值
第二第三个参数是目标位置的坐标值
第四个参数是“冷却时间”

function moveElement(elementID, final_x, final_y, time) {
    if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    /*获取left和top的值并利用parseInt函数将其转换为整数*/
    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++;
    }
    if(xpos > final_x) {
        xpos--;
    }
    if(ypos < final_y) {
        ypos++;
    }
    if(ypos > final_y) {
        ypos--;
    }
    /*之前转换为整数了，现在要再转换回原来的格式*/
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"', "+final_x+", "+final_y+", "+time+")";
    movement = setTimeout(repeat, time);
}

注意moveElement函数的final_x和final_y的值一直都是目标位置的坐标，并不会因为调用moveElement函数而改变这两个参数的值。
书中提到了这样的建议：除非浏览器允许用户”冻结“移动着的内容，否则就应该避免让内容再页面中移动。关键在于用户能不能控制，如果解决了这个问题，就可以根据用户行为移动元素来增强页面效果。
不过对于我这样的新手来说，还是以后遇见了再说吧。代码放在github里了，本文对应的是chapter10。

eye_water

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript Dom编程艺术读书笔记（六）

用Javascript实现动画效果之前已经提到能够用DOM来改变网页的显示效果，但是打开网页后网页能够瞬间显示被改变之后的效果。如果想要实现动画效果，就应该为改变页面效果的函数设置一个“冷却时间”，等函数“冷却”好后再次执行这个函数。这样多执行几次函数，执行一次函数只改变一点，再为函数设置一个“冷却时间”就可以实现动画效果了。如何为函数设置“冷却时间”？Javascript提供了一个set
复制链接

扫一扫

专栏目录