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

StackOverflow https://stackoverflow.com/questions/2400266

Вопрос

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

Это было полезно?

Решение 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>

Другие советы

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

Вам не обязательно делать это в процентах, если только это не является неотъемлемой частью вашей проблемы.Следующее, к счастью, сделает элемент абсолютно позиционированным, а затем перемещает его на 5 пикселей вправо и вниз каждые 10 секунд для итераций "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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top