JavaScript / jquery: اتبع المسار فوق الصفحة

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

سؤال

أحتاج إلى جعل GIF متحركة "تطير فوق صفحة واتبع المسار. أفكر في استخدام 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 ثانية من الثانية حتى "عد":

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 Raw، ولكن الأطر مثل JQuery، النموذج الأولي، الإغلاق، YUI، إلخ. تساعدك على الكثير من الأشياء وتستحق النظر إليها. على سبيل المثال، إذا كنت تستخدم ما ورد أعلاه، إلا إذا قمت بإنشاء العنصر المطلق مسبقا مسبقا وأيضا تحديد الأساليب اليسرى والأعلى على العنصر نفسه (عبر مضمون style السمة)، سوف تقفز إلى 0،0 في البداية ثم البدء في الانتقال من هناك. يمكن أن تساعدك الأطر في المهمة المعقدة إلى حد ما من معرفة المكان الذي يوجد فيه عنصر مضمون في وضعه في وضعه على الإطلاق.

إليك مثال كامل لا يعتمد على إطار (ولكن ربما يجب على الأقل تحديد موضع البداية من "MyLement"):

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