Javascript 空闲时滚动?
有人能给我举一个当用户空闲一段时间后开始自动滚动页面的代码示例吗?我认为这稍微超出了我的技能范围。我认为JQuery或类似的东西可能是合适的,但我似乎无法理解。我正在为我工作的非营利组织设计一个网站,但我们没有钱聘请程序员。我不会要求任何人为我编写任何代码,只是为了给我指明正确的方向。非常感谢你Javascript 空闲时滚动?,javascript,jquery,html,Javascript,Jquery,Html,有人能给我举一个当用户空闲一段时间后开始自动滚动页面的代码示例吗?我认为这稍微超出了我的技能范围。我认为JQuery或类似的东西可能是合适的,但我似乎无法理解。我正在为我工作的非营利组织设计一个网站,但我们没有钱聘请程序员。我不会要求任何人为我编写任何代码,只是为了给我指明正确的方向。非常感谢你 Julie K.jQuery在这方面肯定会有所帮助 您应该处理键盘和鼠标事件以捕获用户活动 然后,每当看到活动时,调用setTimeout,使代码在活动后2分钟运行。将setTimeout调用的返回值保
Julie K.jQuery在这方面肯定会有所帮助 您应该处理键盘和鼠标事件以捕获用户活动 然后,每当看到活动时,调用
setTimeout
,使代码在活动后2分钟运行。将setTimeout
调用的返回值保存在全局变量中,并在setTimeout
之前对其调用cleartimout
以清除最后一个超时
例如:(使用jQuery和插件)
我认为,
onBlur
event就是您要找的,所以您可以这样做:
<body onblur="$('html, body').animate({scrollTop:0}, 'slow');">
您可以将0更改为要滚动到的垂直位置
注意:当您转到其他页面或选项卡或无法看到该页面时,这将触发滚动。您可以使用类似的插件,并将其设置为使用JavaScripts setTimeout()函数触发它,每次检测到某些用户操作(如按下键和单击)时,该函数都会重置。首先您必须定义空闲的含义,我将假设用户在x时间段内没有移动鼠标。 以下是步骤
var lastTime=0;
var threshold=60000 ; // 1min
var howOftenToCheck = 1000;//1 sec
var inter = 0;
inter = setInterval(function() {
var delta=lastTime-currentTime;
if(delta>threashold){
clearInterval(inter);
window.scrollTo(xpos,ypos);
}
}, howOftenToCheck);
这应该给您一个大致的想法。使用以下jQuery函数滚动页面的正文
// Scrolling Down
$('body').animate({
scrollTop: '-=300px'
}, 2000);
// Scrolling Up
$('body').animate({
scrollTop: '+=300px'
}, 2000);
这里有一些快速而肮脏的东西可以满足你的需要。我目前已经将其设置为2秒空闲时间,但您可以根据自己的意愿进行更改
var now = new Date();
setInterval(function(){
var nnow = new Date();
if(nnow.getTime() - now.getTime() >= 2000)
$('body').animate({scrollTop: '+=50'}, 2000, 'linear');
}, 2000);
$(document)
.mousemove(function(){ now = new Date(); $('body').stop(); })
.keypress(function(){ now = new Date(); $('body').stop(); });
编辑:添加。在mousemove和keypress事件中停止,以便在用户移动鼠标或按键时立即停止滚动,而不是等待动画完成。您应该在没有鼠标或键盘的情况下以某种方式捕捉滚动。否则,使用触摸屏或语音控制(Opera)的读者会遇到困难
var now = new Date();
setInterval(function(){
var nnow = new Date();
if(nnow.getTime() - now.getTime() >= 2000)
$('body').animate({scrollTop: '+=50'}, 2000, 'linear');
}, 2000);
$(document)
.mousemove(function(){ now = new Date(); $('body').stop(); })
.keypress(function(){ now = new Date(); $('body').stop(); });