我正在构建一个脚本，它将从图库中滚动并在鼠标/键盘事件后居中显示图像。 一旦图像被“cliked”，只有被点击的图像将显示并居中在屏幕上，所有其他图像将被隐藏。 然后，用户可以再次单击以滚动到下一个图像。
注意：当最后一个img被触发时，我们将显示页面的底部。
报告：
有没有人知道如何处理这些事件以使它们协同工作？
Here is an Jsfidle/example of it
HTML
<div id="galleries" class="">
<div id="pictures-content" class="1">
<img src="http://www.clipartbest.com/cliparts/RiA/jnd/RiAjnd9iL.png">
</div>
<div id="pictures-content" class="2">
<img src="http://www.clker.com/cliparts/v/N/K/k/N/3/number-2-design-md.png">
</div>
<div id="pictures-content" class="3">
<img src="http://www.clker.com/cliparts/x/B/x/Y/R/L/number-3-md.png">
</div>
<div id="pictures-content" class="4">
<img src="http://www.clker.com/cliparts/K/w/R/r/V/Z/number-4-md.png">
</div>
<div id="pictures-content" class="5">
<img src="http://www.bubblews.com/assets/images/news/23937009_1390558154.png">
</div>
<div id="pictures-content" class="6">
<img src="http://www.olneymiddle.milton-keynes.sch.uk/Year6/wp-content/uploads/2014/02/number-6-md-Copy.png">
</div>
<div id="pictures-content" class="7">
<img src="http://www.clker.com/cliparts/V/K/h/8/c/A/number-7-md.png">
</div>
<div id="pictures-content" class="8">
<img src="http://www.clker.com/cliparts/M/L/0/g/q/R/red-rounded-with-number-8-md.png">
</div>
<div id="pictures-content" class="9">
<img src="http://www.clker.com/cliparts/h/S/2/m/C/o/red-rounded-with-number-9-md.png">
</div>
</div><!-- galleries --!>
的jQuery
presentation_mode_stop_scrolling = "off";
// Calling functions
$(document).ready(function(){
// Init the dom - add a class number to each img
init_dom_class();
var picture_to_center = "";
var key_press = "";
var counter =0;
var max = $("#galleries #pictures-content").length;
$("#galleries #pictures-content").off('click');
$("#galleries #pictures-content").on('click',undisplay_center_pictures);
//quit presentation mode + display all content + init variables on scroll event
$(window).scroll(function () {
if ((presentation_mode_stop_scrolling === "off")) {
$("#galleries #pictures-content").on('click');
var i=1;
// We are checking if we use to be in the presentation mode to removed it just once
// Also we display all the pictures again
var class_gall= $("#galleries").attr('class');
// display all content + init variables
if(class_gall=="picture_presentation") {
$("#galleries #pictures-content").each(function() {
$("#galleries ."+i+" img").animate({opacity:1});
i++;
});
$("#galleries").removeClass('picture_presentation');
$("#header").animate({opacity:1});
$("#description").animate({opacity:1});
$("#bottom_site").animate({opacity:1});
key_press == "";
}
}
});
//quit presentation mode + display all content + init variables on resize event
$(window).resize(function () {
if (presentation_mode_stop_scrolling === "off"){
//quit presentation mode
var i=1;
// We are checking if we use to be in the presentation mode to removed it just once
// Also we display all the pictures again
var class_gall= $("#galleries").attr('class');
if(class_gall=="picture_presentation"){
// console.log("QUITTING");
// console.log("class_gall: "+class_gall);
$("#galleries #pictures-content").each(function() {
$("#galleries ."+i+" img").animate({opacity:1});
i++;
});
$("#galleries").removeClass('picture_presentation');
$("#header").animate({opacity:1});
$("#description").animate({opacity:1});
$("#bottom_site").animate({opacity:1});
key_press == "";
}
}
});
$(document).keydown(function(eventkeyboard) {
eventkeyboard.preventDefault();
//eventkeyboard.which is set by jQuery for those browsers that do not normally support eventkeyboard.keyCode.
// WE HAVE TO RESET THIS VALUE OTHERWISE THE ANIMATION IS BROKEN
key_press = "";
var keyCode = eventkeyboard.keyCode || eventkeyboard.which;
// KEY UP
if (keyCode === 38) {
return false;
}
// KEY DOWN
if (keyCode === 40) {
// console.log("key down");
// Unbind the click eventkeyboard with the presentation_mode_stop_scrolling variable
// console.log("presentation_mode_stop_scrolling: "+presentation_mode_stop_scrolling);
// allow keyboard action when the scrolling animation is completed
if (presentation_mode_stop_scrolling === "off"){
// IF EACH OF THE IMAGES ARE VISIBLE WE START FROM THE BOTTOM
var class_galleries= $("#galleries").attr('class');
if(class_galleries=="picture_presentation"){
// console.log("key down - THERE IS AN ACTIVE IMAGE"); // ACTIVE IMG
// THERE IS AN ACTIVE IMAGE
key_press = "down_with_a_focus_image"; // define the key pressed
var picture_to_center = retrieve_the_selected_img(eventkeyboard,key_press); // get img to center
// console.log("picture_to_center: "+picture_to_center);
hide_all_website_items_except_img_to_center(picture_to_center); // hide all img except the img to center
scroll_to_the_new_picture_to_center(picture_to_center);
return false;
} else {
// console.log("key down - THERE ISN'T ANY ACTIVE IMAGE"); // NO ACTIVE IMG
key_press = "down_without_any_focused_image"; // define the key pressed
var picture_to_center = retrieve_the_selected_img(eventkeyboard,key_press); // get img to center
$('#galleries #pictures-content').css({'background-image' : 'none'}); // Removing the background loading img
$("#galleries").addClass('picture_presentation'); // Add the presentation
hide_all_website_items_except_img_to_center(picture_to_center); // hide all img except the img to center
scroll_to_the_new_picture_to_center(picture_to_center);
return false;
}
}
return false;
}
// KEY LEFT
if (keyCode === 37) {
return false;
}
// KEY RIGHT
if (keyCode === 39) {
return false;
}
});
// We are calling this function on click event
function undisplay_center_pictures(event) {
event.preventDefault();
$("#galleries #pictures-content").off('click');
var class_galleries = $("#galleries").attr('class'); // we check if an image is already center
// console.log("class_galleries: "+class_galleries);
var picture_to_center = retrieve_the_selected_img(event); // populate the picture_to_center with the selected img
// console.log("picture_to_center: "+picture_to_center);
// Manage the picture_presentation mode and return the next image to center
if ($("#galleries").attr('class') === "picture_presentation") {
// no key for the moment
var new_picture_to_center = show_and_get_new_picture_to_center_and_hide_previous(event,picture_to_center,max);
// console.log("new_picture_to_center: "+new_picture_to_center);
// var picture_to_center = show_and_get_new_picture_to_center_and_hide_previous(picture_to_center,max);
scroll_to_the_new_picture_to_center(new_picture_to_center);
} else {
// hide everything except the img with the picture_to_center class
hide_all_website_items_except_img_to_center(picture_to_center);
scroll_to_the_new_picture_to_center(picture_to_center);
// ADD THE PICTURE PRESENTATION CLASS TO ENTER TO THE PRESENTATION MODE
$("#galleries").addClass('picture_presentation');
}
};
// Init the dom - add a class number to each img
function init_dom_class() {
var i=1;
$("#galleries #pictures-content").each(function() {
$(this).addClass(""+i+"");
i++;
});
};
// return the selected img
function retrieve_the_selected_img (event,key_press){
event.preventDefault();
// We are using only the mouse for the moment so
// console.log("key_press: "+key_press);
if (key_press == "down_without_any_focused_image") {
// var picture_to_center = 1;
return 1;
}
else if (key_press == "down_with_a_focus_image") {
$("#galleries #pictures-content img").each(function() {
var all_class_galleries = $(this).css("opacity");
if (all_class_galleries==1){
picture_to_center = parseInt($(this).parent().attr('class'));
// DO SOMETHING ON IMG TO CENTER
picture_to_center = picture_to_center+1;
}
});
return picture_to_center;
}
else {
// mouse click event
return parseInt($(event.target).parent().attr('class'));
}
};
// hide everything except the img with the picture_to_center class
function hide_all_website_items_except_img_to_center(picture_to_center){
// console.log(picture_to_center);
console.log("hide_all_website_items_except_img_to_center");
// Make a condition redirect user to bottom of the page on last image and display all content
if(picture_to_center > parseInt($("#galleries #pictures-content").length)) {
// FADE IN ALL PICTURES
z=1;
$("#galleries #pictures-content").each(function() {
$("#galleries ."+z+" img").animate({opacity:1});
z++;
});
$("#header").animate({opacity:1});
$("#description").animate({opacity:1});
$("#bottom_site").animate({opacity:1});
// REMOVE THE presentation mode
$("#galleries").removeClass('picture_presentation');
$("body").scrollTo($(document).height(), 800, {
onAfter: function(){
setTimeout(function(){
presentation_mode_stop_scrolling = "off";
// console.log("presentation_mode_stop_scrolling: "+presentation_mode_stop_scrolling);
$("#galleries #pictures-content").on('click',undisplay_center_pictures);
},100);
}
});
} else {
$("#galleries #pictures-content").each(function() {
var all_class_galleries = parseInt($(this).attr('class'));
if(all_class_galleries!=picture_to_center) {
$("#galleries ."+all_class_galleries+" img").animate({opacity:0});
} else{
// $("#galleries ."+all_class_galleries+" img");
// With keyboard, we need to display the next img
$("#galleries ."+all_class_galleries+" img").animate({opacity:1});
}
});
$("#header").animate({opacity:0});
$("#description").animate({opacity:0});
$("#bottom_site").animate({opacity:0});
}
return true;
};
// Hide the previous current img + Update the picture to center variable with the new img value + return new picture to center
function show_and_get_new_picture_to_center_and_hide_previous(event,picture_to_center,max){
event.preventDefault();
console.log("show_and_get_new_picture_to_center_and_hide_previous");
// We hide the previous centered img + get new picture to center id
if (picture_to_center < max) {
$("#galleries ."+picture_to_center+" img").animate({opacity:0});
picture_to_center++;
}
else if (picture_to_center == max){
// We go to the bottom of the page
picture_to_center++; // we increment picture_to_center to go to the bottom of the page
// console.log("We have to scroll to the bottom");
// last_picture = 1;
}
// console.log("new picture to center: "+picture_to_center);
// FADE IN THE NEXT IMAGE
$("#galleries ."+picture_to_center+" img").animate({opacity:1});
return picture_to_center;
};
// last picture for keyboard
function scroll_to_the_new_picture_to_center(picture_to_center){
// Stop the user to be able to canceled the presentation mode by scrolling or resizing the window
// during the scrolling event
// Not working properly -> need to check
// console.log(picture_to_center);
console.log("scroll_to_the_new_picture_to_center");
console.log("counter: "+counter);
counter++;
presentation_mode_stop_scrolling = "on";
// Calculate the top margin to center the image inside the screen
var window_height = $(window).height();
var img_height = $("#galleries ."+picture_to_center+" img").height();
var offset = (window_height-img_height)/2;
var max = parseInt($("#galleries #pictures-content").length);
// console.log("max: "+max);
// We are scrolling to the bottom of the page
if(picture_to_center > max){
// FADE IN ALL PICTURES
// picture_to_center = 0;
z=1;
$("#galleries #pictures-content").each(function() {
$("#galleries ."+z+" img").animate({opacity:1});
z++;
});
$("#header").animate({opacity:1});
$("#description").animate({opacity:1});
$("#bottom_site").animate({opacity:1});
console.log("picture_presentation should be removed");
$("#galleries").removeClass('picture_presentation');
console.log("picture_presentation should be removed");
$("body").scrollTo($(document).height(), 800, {
onAfter: function(){
setTimeout(function(){
presentation_mode_stop_scrolling = "off";
// console.log("presentation_mode_stop_scrolling: "+presentation_mode_stop_scrolling);
$("#galleries #pictures-content").on('click',undisplay_center_pictures);
},100);
}
});
}
else{
$("body").scrollTo($('.'+picture_to_center), 800, {
offset:-offset,
onAfter: function () {
setTimeout(function(){
presentation_mode_stop_scrolling = "off";
// console.log("presentation_mode_stop_scrolling: "+presentation_mode_stop_scrolling);
// $("#galleries #pictures-content").on('click'); -> not working, we need to specify the function
$("#galleries #pictures-content").on('click',undisplay_center_pictures);
},100);
}
});
}
return true;
};
});
答案 0 :(得分：0)
由于.on方法用于导致“keydown”和“click”事件，我不得不解开“keydown”事件中的“click”事件。
$(document).keydown(function(eventkeyboard) {
eventkeyboard.preventDefault();
$('#galleries #pictures-content').off('click');
... etc