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

发布于 2024-08-23 19:53:46 字数 121 浏览 4 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏末 2024-08-30 19:53:46

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

你不不必以百分比的形式进行，除非这是您的问题所固有的。下面将愉快地使一个元素绝对定位，然后每十分之一秒将其向右和向下移动 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>

Absolute positioning is likely to be the best way to do it, yes. (I wouldn't put my hand on heart as saying it's the only way, I'm sure you could play other games to do something similar, but you probably don't want to.)

You don't have to do it as a percentage unless that's intrinsic to your problem. The following will happily make an element absolutely-positioned and then move it 5 pixels right and down every 10th of a second for up to 'count' iterations:

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);
        }
    }
}

That's just raw JavaScript, but frameworks like jQuery, Prototype, Closure, YUI, etc. help you with a lot of things and are worth looking into. For instance, if you use the above, unless you make the element absolutely-positioned in advance and also specify the left and top styles on the element itself (via an inline style attribute), it'll jump to 0,0 at the outset and then start moving from there. Frameworks can help you with the fairly complex task of figuring out where an inline element is before making it absolutely-positioned.

Here's a complete example that doesn't rely on a framework (but probably should, at least for determining the starting position of '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>

回复收藏 0 原文

简单 2024-08-30 19:53:46

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>

jQuery seems to be the way to go, basic and more of a hack than a solution, but if you definitely need something with 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>

回复收藏 0 原文

~没有更多了~