JavaScript/jQuery：跟随页面上的路径答案

【问题标题】：JavaScript/jQuery: Follow path over pageJavaScript/jQuery：跟随页面上的路径
【发布时间】：2010-03-08 09:17:51
【问题描述】：

我需要制作一个动画 gif '飞过页面并遵循路径。我正在考虑使用 jQuery，但我认为唯一的方法是手动计算应放置形状层的宽度/高度百分比是正确的，然后使用绝对定位是唯一的方法吗？我知道有一些很棒的 jQuery 插件可用于这类事情。

【问题讨论】：

标签： javascript jquery animation effects jquery-animate

【解决方案1】：

绝对定位可能是做到这一点的最佳方式，是的。（我不会说这是唯一的方式，我相信你可以玩其他游戏来做类似的事情，但你可能不想这样做。） p>

除非这是您的问题所固有的，否则您不必按百分比来计算。下面将愉快地使一个元素绝对定位，然后每 10 秒左右移动 5 个像素，以进行最多 'count' 次迭代：

function moveDemo(element, count) {

    element.style.position = "absolute";
    moveit();

    function moveit() {
        element.style.left = ((parseInt(element.style.left) || 0) + 5) + "px";
        element.style.top  = ((parseInt(element.style.top)  || 0) + 5) + "px";
        if (count-- > 0) {
            setTimeout(moveit, 100);
        }
    }
}

这只是原始的 JavaScript，但 jQuery、Prototype、Closure、YUI 等框架可以帮助您完成很多事情，值得研究。例如，如果你使用上面的方法，除非你提前让元素绝对定位，并且在元素本身上指定 left 和 top 样式（通过内联 style 属性），它会跳转到 0,0一开始，然后从那里开始移动。框架可以帮助您完成相当复杂的任务，即在将内联元素设置为绝对定位之前确定它的位置。

这是一个不依赖框架的完整示例（但可能应该，至少用于确定“myElement”的起始位置）：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Move It Demo Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#myElement {
    border:     1px solid black;
}
</style>
<script type='text/javascript'>
function startMoving() {

    moveDemo(document.getElementById('myElement'), 10);
}

function moveDemo(element, count) {

    element.style.position = "absolute";
    moveit();

    function moveit() {
        element.style.left = ((parseInt(element.style.left) || 0) + 5) + "px";
        element.style.top  = ((parseInt(element.style.top)  || 0) + 5) + "px";
        if (count-- > 0) {
            setTimeout(moveit, 100);
        }
    }
}
</script>
</head>
<body><div>
<input type='button' value='Start' onClick="startMoving();">
<div id='myElement'>I'm on the move</div>
</div></body>
</html>

【讨论】：

谢谢，这就是我的想法。我选择了 jQuery，让它更易于扩展（如下）。

【解决方案2】：

jQuery 似乎是要走的路，基本的，更多的是 hack 而不是解决方案，但如果你肯定需要 JS 的东西。

<style type="text/css">
#butterfly 
{
    display:block;
    background: #f00;
    width: 100px;
    height: 100px;
    left: 0;
    top: 0;
    position: fixed;
    background: url(butterfly.gif) no-repeat;
}
</style>
<script type='text/javascript'>
    function moveButterfly() {
        //moveDemo(document.getElementById('butterfly'), 10);
        var butterfly = $('#butterfly');
        var positions = [
            { props: { left: '25%', top: '20%' }, time: 1000 },
            { props: { left: '40%', top: '18%' }, time: 610 },
            { props: { left: '58%', top: '38%'}, time: 400 },
            { props: { left: '81%', top: '52%' }, time: 520 },
            { props: { left: '150%', top: '67%'}, time: 440 },
        ];
        jQuery.each(positions, function(i, e) {
            butterfly.animate(e.props, e.time);
        });
    }
    $().ready(function() {
        moveButterfly();
    });
</script>

【讨论】：