javascript - 如何使用箭头键在浏览器中重新加载新的 URl

标签 javascript image-gallery

Facebook 和 myspace 在照片库中都有一个很好的功能,当您进入图像页面时,页面上会显示用户的图像和用户评论。您可以点击键盘的左右箭头键,页面将加载下一页,它的速度非常快,如果您按住该键,它会快速浏览许多页面。我知道这主要是用 JavaScript 实现的,我的主要问题是如何让新页面加载得很快?

我使用 PHP/mysql/Javascript

最佳答案

您将捕获用户按下的按键以及左箭头和右箭头的响应。捕获 key 并不那么困难:

$(window).bind("keypress", function(e) {
  var code = (e.keyCode ? e.keyCode : e.which); // which code?
  alert(String.fromCharCode(code)); // which key, according to the code?
});

您希望根据您的喜好调整该代码。如果单击的是右箭头,则发出对 get-image.php?direction=next&user=12838203 的请求,如果是后退箭头,只需将“next”替换为“prev”即可。

$("#loading").show(); // fancy ajax loading animation
$.post("get-image.php", {direction:"next",user:12838203}, function(response){
  // hide our ajax loading animation
  $("#loading").hide();
  // if we get a proper response, like a source for a new image back
  $("#image").fadeOut("fast").attr("src", response).fadeIn("fast");
});

关于javascript - 如何使用箭头键在浏览器中重新加载新的 URl,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1995721/

相关文章:

javascript - window.history.pushState 之后返回第一个状态

javascript - HTML/PHP 在我填充的地方设置选项值 select from array

javascript - 弹出窗口中的 jQuery 图片库

javascript - Jquery/Javascript Flickr Gallery..急需帮助

javascript - 如何使用包react-native-image-viewing显示图像的当前索引

php - 根据浏览器宽度显示不同的 Adsense 广告

javascript - 为什么 js 不能在 cordova 中工作?

android - 在 Android 中使用 Lazy Loader 时 GalleryView 中的图像质量损失

javascript - 我可以将 NPX 与 yarn 一起使用吗?

android - 如何制作水平和垂直滚动的二维图片库?