如何用jQuery复制Mac淡出的“屏保”？

Question

你知道在Mac电脑上，在大约2-3分钟不活动后，它是如何部分淡出屏幕的--在iOS上也是如此？好吧，我想用jQuery把它复制到网页上。

我知道如何让它淡出，但我不知道如何让它在2到3分钟没有鼠标移动或按键的情况下真正工作。

我在Google上研究过这个问题，我一直在想“如何在Mac上将网页显示为屏幕保护程序”，但这并不是我想要的。

有人知道怎么做吗？

谢谢。

Answer 1

类似这样的东西(未经测试)

// set the last event time to now on page loading
var lastEvent = new Date();

function fadeOut(){
    // your fade out routine
}

// bind appropriate events to everything
$('*').bind('keydown mousemove mousedown',function(){
    // set the lastEvent time to now after any event
    lastEvent = new Date();
})

// run this every second
setInterval(function(){
    // get current time
    var now = new Date();
    // compare to last event (minus 2 mins) and fade out if it was long enough
    if(lastEvent < now - (2 * 60 * 1000))
        fadeOut()
},1000)

Answer 2

处理keydown和mousemove事件，清除超时，然后将超时设置为在2分钟内淡出。

Answer 3

类似于这段未经测试的代码：

function fadeOut(){
    // your fade out routine
}

// initialise the set timeout function to run fade out after 2 seconds
var x = setTimeout(function(){
    fadeOut()
},2000)

// bind appropriate events to everything
$('*').bind('keydown mousemove mousedown',function(){
    // clear the existing timeout and re-set it starting from now
    clearTimeout(x)
    x = setTimeout(function(){
        fadeOut()
    },2000)
})