3

私は現在プロジェクトに取り組んでおり、誰かがこの JS コードを支援できるかどうか疑問に思っていました。ページの読み込み時に DIV を移動させようとしています。たとえば、時刻が午前 9 時だとします。100px ずつ移動し、午前 9 時 30 分に 120px 移動します。

どうもありがとう。

function slide(element, pixels, duration) {
    var start = new Date();

    var start_x = parseInt(element.style.left, 10);

    function frame() {
        var now = new Date(),
            elap = now - start,
            frac = Math.min(elap / duration, 1),
            pos = start_x + (pixels * frac);

        element.style.left = (pos || 0) + "px";

        if (frac < 1) {
            window.requestAnimationFrame(frame);
        }
    }
    window.requestAnimationFrame(frame);
}

var div = $('#slideme');
$('#slideme').load('#slideme', function() {
    var elem = document.getElementById("slideme");
    slide(elem, -200, 1000);
});
4

3 に答える 3

3

この JQuery を試してみましょう:

// Current datetime
var d = new Date();

// Total minutes since midnight
var totalMinutes = (d.getHours() * 60) + d.getMinutes();

// Number of 30 minute intervals (since midnight)
var numberOf30Mins = Math.floor(totalMinutes / 30);

// Work out how many pixels that should be (20px per interval)
var numberOfPixelsToShift = numberOf30Mins * 20;

$('#slideme').css('left', numberOfPixelsToShift);
于 2013-09-05T11:20:29.820 に答える
0

jqueryのアニメーション機能を利用できます。

$(document).ready(function() {
$( "#block" ).animate({
marginLeft: "+1200px",
}, 3000 );
});
于 2013-09-05T11:28:31.670 に答える
0

これを使用しない理由:

$('#slideme').animate({"left": -200}, 1000);

ここでフィドル

于 2013-09-05T11:09:23.513 に答える