在頁面加載時隨計算機時間移動的DIV

我目前正在開發一個項目，我想知道是否有人可以協助使用這段JS代碼。我試圖讓DIV在頁面加載時移動。所以，比如說時間是早上九點;我希望它移動100px和上午9:30移動120px。在頁面加載時隨計算機時間移動的DIV

非常感謝。

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

來源

2013-09-05 user2740929

您似乎在使用JQuery，是否正確？ – gvee

是的，我正在使用jQuery。 – user2740929

好吧，爲什麼9:00 am = 100px和9:30 am = 120px？你想讓4am平均到什麼程度？ – gvee

爲什麼不使用這樣的：

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

Fiddle here

來源

2013-09-05 11:09:23 Slicedpan

與這個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-05 11:20:29 gvee

這是行得通的。非常感謝。 – user2740929

@ user2740929如果這對你有效，就會投票並接受它作爲答案。 :) –

約翰有人應該起來，因爲我沒有達到15的聲望。非常感謝。 – user2740929

您可以使用jQuery的動畫功能。

$(document).ready(function() { 
$("#block").animate({ 
marginLeft: "+1200px", 
}, 3000); 
});

來源

2013-09-05 11:28:31 Pooja

兩個問題：** 1）**''.ready（）'幾乎沒用。如果你把你的JS代碼放在''之前，那麼一旦DOM完成，它就會被執行。 ** 2）**當您創作動畫時，您期望人們看到它。執行'$ .ready（）'是因爲用戶看到頁面。 –

在頁面加載時隨計算機時間移動的DIV

回答

相關問題