在页面加载时随计算机时间移动的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

回答

相关问题