Question

我有我的下一个投资组合网站的这个工作示例： http://lantosistvan.com/temp/viewport-images/wedding.php

我有这个图像调整大小脚本：

$(document).ready(function(){
if( $('body').hasClass('hor') && $(window).width() >= 500 ){ // Only run the script of Body.hor and viewport width less or equal to 500px -> document.documentElement.clientWidth >= 500
var atmeretezo = function () {
    var windowHeight = $(window).height() - 24; // Jquery measuring the window height (browser viewport)
    //var windowHeight = window.innerHeight - 17;
    var headerHeight = $('header').height(); // Header height
    var footerHeight = $('footer').height(); // Footer height
    var headerFooter = headerHeight + footerHeight;
    var imagesHeight = windowHeight - headerFooter; // Real time calculate the new image height

    $('body.hor .horgallery .images li img').height(imagesHeight); // This will trigger the upper calculation

$('body.hor .horgallery .images').css({ // This will put them in the middle of the available free space (if there's any)
    'line-height': windowHeight - headerFooter + 'px',
    'height': imagesHeight + 'px'
});

};
$(document).ready(atmeretezo); // Trigger calculation
$(window).resize(atmeretezo); // Trigger line-height
}
});

这个Mouswheel脚本：

$(document).ready(function(){
if( $('body').hasClass('hor')  && $(window).width() >= 500 ){

$(".horgallery").mousewheel(function(event, delta) {
  this.scrollLeft -= (delta * 75);
  event.preventDefault();
});

} }）;

在CSS中，我将布局从水平更改为垂直。

请在窗口模式下，开始减少浏览器窗口的水平。我的问题是，当你在500px以上的屏幕宽度下重新加载我的页面时，我想要实时附加和取消附加具有相同功能的功能。但看起来有些东西留在了DOM中。

最简单的解决方案只是在body元素中添加和删除“hor”类，但我担心DOM不会那样工作......

感谢您的帮助！

更新

我尝试添加 - 删除body中的hor类，但是有些原因导致这个脚本不起作用：

$(window).resize(function() {
if ($(window).width() >= 500) {
    $('body').removeClass('hor');
}
if ($(window).width() < 500) {
    $('body').addClass('hor');
}
});

此脚本还会在原生全屏上调整图像大小。 另外，为什么不从“身体”中删除“hor”类？

更新2：

$(document).ready(function(){
var scroller = function () {
if ($(window).width() >= 900) {
    // Attach
    $(".horgallery").on('mousewheel', function(event, delta) {
      this.scrollLeft -= (delta * 75);
      event.preventDefault();
    });
}

if ($(window).width() < 900) {
    // Detach
    $(".horgallery").off('mousewheel');
}
};
$(document).ready(scroller);
$(window).resize(scroller);
});

现在我只用鼠标滚轮和900px宽度测试它。似乎某些原因使滚动速度加倍。即使我只是触摸浏览器窗口大小。

Answer 1

在jQuery中，您可以使用以下命令将侦听器附加/分离到

// Attach
$(".horgallery").on('mousewheel', function(event, delta) {
  this.scrollLeft -= (delta * 75);
  event.preventDefault();
});

// Detach
$(".horgallery").off('mousewheel');

请参阅on和off

在屏幕（视口）上附加和取消附加javascript函数，实时调整大小

1 个答案: