JavaScript / jQuery: следуйте по пути на странице - PullRequest
Новая
       33

JavaScript / jQuery: следуйте по пути на странице

0 голосов
/ 08 марта 2010

Мне нужно сделать анимированный GIF 'летать над страницей и следовать пути. Я думаю об использовании jQuery, но был ли бы я прав, думая, что единственный способ сделать это - вручную вычислить процент ширины / высоты, где слой формы должен быть размещен, тогда использование абсолютного позиционирования - единственный способ сделать это? Я знаю, что есть несколько удивительных плагинов jQuery для этого типа вещей.

Ответы [ 2 ]

2 голосов
/ 08 марта 2010

Абсолютное позиционирование, вероятно, будет лучшим способом сделать это, да. (Я бы не положил руку на сердце, говоря, что это способ only , я уверен, что вы могли бы играть в другие игры, чтобы делать что-то подобное, но вы, вероятно, не хотите.)

Вам не нужно делать это в процентах, если это не присуще вашей проблеме. Следующее будет удачно сделать элемент абсолютно позиционированным, а затем переместит его на 5 пикселей вправо и вниз каждую 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);
        }
    }
}

Это просто сырой 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>
1 голос
/ 09 марта 2010

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>
...