Question

我需要制作动画gif'飞过页面并按照路径行进。我正在考虑使用jQuery，但我认为唯一的方法是手动计算应该放置形状图层的宽度/高度的百分比，然后使用绝对定位是唯一的方法吗？我知道有一些令人惊奇的jQuery插件可用于此类事情。

Answer 1

绝对定位可能是最佳方式，是的。（我不会把手放在心上说这是唯一的方式，我相信你可以玩其他游戏做类似的事情，但你可能不想这样做。）

除非您的问题固有，否则您不必按百分比进行。下面将很高兴地使一个元素绝对定位，然后每隔10秒向右和向下移动5个像素，直到“计数”迭代：

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等框架可以帮助您完成很多事情，值得研究。例如，如果您使用上面的内容，除非您事先使元素绝对定位并且还在元素本身上指定左侧和顶部样式（通过内联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>

Answer 2

jQuery似乎是要走的路，基本的，更多的是黑客而不是解决方案，但如果你肯定需要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>

JavaScript / jQuery：按路径覆盖页面

2 个答案: