2
Hier ist der HTML-Code mit allen enthalten (css/js) Die Maus Ereignisse funktionieren gut. Das einzige Problem, mit dem ich konfrontiert bin, ist, dass es erforderlich ist, zweimal eine Taste (und Art wie ein Doppelklick, d. H. Sehr schnell für das erwartete Verhalten zu drücken). Was mache ich hier falsch?jquery drücken Sie die Taste zweimal
<html>
<head>
<title>Example</title>
<style type="text/css">
img {
width: 960px;
height: 655px;
margin-bottom: 10px;
}
html {
max-width: 100%;
}
body {
padding: 0;
margin-top: 10px;
border-top: 10px;
margin-bottom: 0px;
border-bottom: 0px;
overflow-x: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<link rel="shortcut icon" href="smiley.ico"></link>
</head>
<body>
<IMG SRC="foto001.jpg" />
<IMG SRC="foto002.jpg" />
<IMG SRC="foto003.jpg" />
<IMG SRC="foto004.jpg" />
<IMG SRC="foto005.jpg" />
<IMG SRC="foto006.jpg" />
<IMG SRC="foto007.jpg" />
<IMG SRC="foto008.jpg" />
<IMG SRC="foto009.jpg" />
<IMG SRC="foto010.jpg" />
<IMG SRC="foto011.jpg" />
<IMG SRC="foto012.jpg" />
<IMG SRC="foto013.jpg" />
<IMG SRC="foto014.jpg" />
<IMG SRC="foto015.jpg" />
<IMG SRC="foto016.jpg" />
<IMG SRC="foto017.jpg" />
<IMG SRC="foto018.jpg" />
<IMG SRC="foto019.jpg" />
<IMG SRC="foto020.jpg" />
<IMG SRC="foto021.jpg" />
<IMG SRC="foto022.jpg" />
<IMG SRC="foto023.jpg" />
<IMG SRC="foto024.jpg" />
<IMG SRC="foto025.jpg" />
<IMG SRC="foto026.jpg" />
<IMG SRC="foto027.jpg" />
<IMG SRC="foto028.jpg" />
<IMG SRC="foto029.jpg" />
<IMG SRC="foto030.jpg" />
<script>
var puloSeta = 9; // 9 pixels
// verifies mouse events
var clicked = false, clickY;
$(document).on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
e.preventDefault();
clicked = true;
clickY = e.pageY;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('html').css('cursor', 'grabbing');
$(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
}
// idleTime counts the time the system is idle
idleTime = 0;
idleTimeKeyUp = 0;
minhamatriz = [ 0,
665, 1330, 1995, 2660, 3325,
3990, 4655, 5320, 5985, 6650,
7315, 7980, 8645, 9310, 9975,
10640, 11305, 11970, 12635, 13300,
13965, 14630, 15295, 15960, 16625,
17290, 17955, 18620, 19285 ];
$(window).bind('mousewheel DOMMouseScroll', function(e) {
// Handles the idle timer on mouse wheel movement
idleTime = -2.0;
});
// Increment the idle time counter every minute.
var myVar = setInterval(timerIncrement, 100); // some time
$(document).ready(function() {
// Handles the idle timer on mouse clicks
$(this).mousedown (function (e) { idleTime = -5000000; });
$(this).mouseup (function (e) { idleTime = 0; });
// Handles the idle timer on keypress movement.
$(this).keypress(function (e) {
//idleTimeKeyUp = 0;
if (e.keyCode == 36) { // Home key
e.preventDefault();
$('body').addClass('.stop-scrolling');
$(window).scrollTop(0);
$('body').removeClass('.stop-scrolling');
}
else if (e.keyCode == 35) { // End key
e.preventDefault();
$('body').addClass('.stop-scrolling');
$(window).scrollTop($(document).height());
$('body').removeClass('.stop-scrolling');
}
if (e.keyCode == 36 && e.which == 0) { // Home key
e.preventDefault();
$('body').addClass('.stop-scrolling');
$(window).scrollTop(0);
$('body').removeClass('.stop-scrolling');
}
else if (e.keyCode == 35 && e.which == 0){ // End key
$('body').addClass('.stop-scrolling');
$("html, body").scrollTop($(document).height());
e.preventDefault();
$('body').removeClass('.stop-scrolling');
}
else if (e.keyCode == 38 && e.which == 0) { // Up-arrow key
idleTimeKeyUp = -1;
$('body').addClass('.stop-scrolling');
e.preventDefault(); // essential to avoid default handler
var top = $(window).scrollTop();
$(window).scrollTop(top - puloSeta);
$('body').removeClass('.stop-scrolling');
puloSeta = 45;
}
else if (e.keyCode == 40 && e.which == 0) { // Dn-arrow key
idleTimeKeyUp = -1;
$('body').addClass('.stop-scrolling');
e.preventDefault(); // Essential to avoid default handler
var top = $(window).scrollTop();
$(window).scrollTop(top + puloSeta);
$('body').removeClass('.stop-scrolling');
puloSeta = 45;
}
else if (e.keyCode == 104 || e.which == 104) { // "h" key pressed
e.preventDefault();
alert("posicion en pixeles: " + $(window).scrollTop());
//return false;
}
else if (e.keyCode == 0 && e.which == 91) { // "[" pressed
$('body').addClass('.stop-scrolling');
e.preventDefault();
var y = $(window).scrollTop();
$(window).scrollTop(y-1);
$('body').removeClass('.stop-scrolling');
//return false;
}
else if (e.keyCode == 0 && e.which == 93) { // "]" pressed
$('body').addClass('.stop-scrolling');
e.preventDefault();
var y = $(window).scrollTop();
$(window).scrollTop(y+1);
$('body').removeClass('.stop-scrolling');
//return false;
}
else {
idleTime = -5000000;
//$('html, body').stop().animate({ scrollTop: posicaoFinal }, 150);
}
});
$(this).keydown (function (e) {
idleTime = -5000000;
//var myVar = setInterval(timerIncrement, 100); // some time
//clearInterval(myVar);
});
$(this).keyup (function (e) { idleTime = idleTimeKeyUp; puloSeta = 9; });
});
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime >= 4) { // some user defined time
processing(); }
}
function processing() {
var posicao = document.body.scrollTop;
var posicaoFinal = valorcerto(minhamatriz, posicao);
//old version, without animate
//$("html, body").scrollTop(posicaoFinal);
$('html, body').stop().animate({ scrollTop: posicaoFinal }, 120);
if (posicaoFinal >= posicao) {
$('html, body').stop().animate({ scrollTop: posicaoFinal+1 }, 120);
}
}
function valorcerto(matriz, laposicion) {
if (matriz.indexOf(laposicion) != -1) {
// position is located inside the array
return parseInt(laposicion);
}
var fim = matriz.length-1;
for (i=0; i<fim; i++) {
var limiteA = matriz[i];
var limiteB = matriz[i+1];
if (laposicion > limiteA && laposicion < limiteB) {
// position between limiteA and limiteB
var diffA = laposicion - limiteA;
var diffB = limiteB - laposicion;
if (diffA == diffB) {
// position is equidistant to both points
return parseInt(laposicion);
}
if (diffA < diffB) {
// position is closer to limiteA
return parseInt(limiteA);
}
else {
// position is closer to limiteB
return parseInt(limiteB);
}
}
}
}
</script>
</body>
</html>
Sorry, ich war nicht klar genug. Die Ereignisse, die nicht wie erwartet funktionieren, sind die Tastaturen. Ich habe gerade Maus-Doppelklick-Ereignis als eine Analogie bezeichnet. Wenn ich die Tasten 'Home', 'Ende', 'Seite nach oben', 'Seite nach unten' nur einmal drücke, ist es so, als hätte ich gar keine gedrückt. – ProgAndPlay
Ist das überhaupt möglich? Ich meine, diese Tasten sind etwas Besonderes, im Gegensatz zu Zeichenschlüsseln. Haben Sie versucht, es anderen Tasten zuzuweisen, um zu testen, ob der Code funktioniert? –