JavaScript 动画效果

最新推荐文章于 2024-03-16 21:29:52 发布

huaying.chen

最新推荐文章于 2024-03-16 21:29:52 发布

阅读量1.3k

点赞数 4

分类专栏： Oscar_js 文章标签： JavaScript setTimeout clearTimeout JavaScript动画 position

本文链接：https://blog.csdn.net/crave_shy/article/details/42678563

版权

Oscar_js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JavaScript 动画效果

一：简介

通过JavaScript动态改变元素位置来实现动画效果。实例、鼠标移动到链接、在下方显示对应图片。主要是网页的分层结构思想的应用。

二：重点

        CSS中元素的position属性、overflow属性
        varvariable = setTimeout("function", interval);//定时触发函数
        clearTimeout(variable);//清除定时触发函数、variable是setTimeout的返回值。
        parseInt(str);//将字符串转换成整数
        parseFloat(str);//将字符串转换成浮点数
        Math.ceil(number);//向上取整
        Math.floor(number);//向下取整
        Math.round(number);//四舍五入

三：实现

效果：

list.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Web Design</title>
    <link rel="stylesheet" href="../css/list.css">
    <script src="../js/moveElementImprove.js"></script>
    <script src="../js/list.js"></script>
    <script src="../js/addLoadEvent.js"></script>
</head>
<body>
<h1>Web Design</h1>

<p>These are the things you should know.</p>
<ol id="linkList">
    <li><a href="structure.html">Structure</a></li>
    <li><a href="presentation.html">Presentation</a></li>
    <li><a href="behavior.html">Behavior</a></li>
</ol>

</body>

</html>

list.css:

#slideShow {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
}

#preview {
    position: absolute;
}

list.js:

/**
 * Created by andychen on 2015/1/9.
 */
function prepareSlideShow() {
    var div = document.createElement("div");
    div.id = "slideShow";
    var img = document.createElement("IMG");
    img.id = "preview";
    img.src = "../images/preview.png";
    img.alt = "building blocks of web design";
    div.appendChild(img);
    insertAfter(document.getElementById("linkList"), div);

    var links = document.getElementsByTagName("a");
    links[0].onmouseover = function () {
        moveElementImprove("preview", -100, 0, 10);
    };
    links[1].onmouseover = function () {
        moveElementImprove("preview", -200, 0, 10);
    };
    links[2].onmouseover = function () {
        moveElementImprove("preview", -300, 0, 10);
    }
}

function insertAfter(targetTag, newTag) {
    var parent = targetTag.parentNode;
    if (parent.lastChild == targetTag) {
        parent.appendChild(newTag);
    } else {
        parent.insertBefore(newTag, targetTag.nextSibling);
    }
}

moveElementImprove.js:

/**
 * Created by andychen on 2015/1/9.
 */
function moveElementImprove (elementId, final_x, final_y, interval) {
    var elem = document.getElementById(elementId);

    if(elem.movement) {
        clearTimeout(elem.movement);
    }

    if(!elem.style.left) {
        elem.style.left = '0px';
    }

    if(!elem.style.top) {
        elem.style.top = '0px';
    }

    var topPosition = parseInt(elem.style.top);
    var leftPosition = parseInt(elem.style.left);
    var dist = 0;

    if (topPosition < final_y) {
        dist = Math.ceil((final_y - topPosition) / 10);
        topPosition += dist;
    }

    if (topPosition > final_y) {
        dist = Math.ceil((topPosition - final_y) / 10);
        topPosition -= dist;
    }

    if (leftPosition < final_x) {
        dist = Math.ceil((final_x - leftPosition) / 10);
        leftPosition += dist;
    }

    if (leftPosition > final_x) {
        dist = Math.ceil((leftPosition - final_x) / 10);
        leftPosition -= dist;
    }

    if (topPosition == final_y && leftPosition == final_x) {
        return true;
    }
    elem.style.top = topPosition + 'px';
    elem.style.left = leftPosition + 'px';
    var repeat = "moveElementImprove('"+elementId+"', "+final_x+", "+final_y+", "+interval+")";
    elem.movement = setTimeout(repeat, interval);
}

addLoadEvent.js 前文已经提到。