CSS显示会影响jQuery/Javascript

CSS Display affects jQuery/Javascript?

本文关键字：Javascript jQuery 影响 显示 CSS      更新时间：2024-06-14

我遇到了一个我相信的奇怪现象，我想知道是否有人知道为什么会发生这种情况。我一直在使用我创建的自定义jQuery幻灯片为一个摄影网站做很多图像处理，但遇到了一些问题。

我在这里有一个画廊：http://www.daemondeveloper.com/photography/gallery.php

我添加了一些功能，可以调整图片库中图像的大小，使其缩放到预览图像的大小。正如您所看到的，最后一个图像是全景的，并且没有填充div的整个高度，即使我有javascript告诉它调整大小。

如果刷新页面，javascript似乎会突然起作用，并且图片会按比例缩放。

现在试着点击女孩的全景图片，我的幻灯片将显示使用jQuery垂直缩放和居中的图像。下面的功能用于处理单击库中的小图像预览。

如果你看看注释的changeSize()函数在哪里，那就是我曾经拥有该函数的地方，而缩放不起作用。然后我把它移到了显示幻灯片的.show（）函数之后，现在它就工作了。因此，显示：无；影响了javascript的激发方式，因为当我调试时，currentImg对象为null，就好像.sslides选择器在设置为display:none；时不存在一样；。这真的发生了吗？还是我只是看到了其他东西的副作用？

如果真的发生了这种情况，可能与我所说的第一个问题有关，即在gallery.php页面的第一次加载时全景图像没有缩放。

$('.imgHolder').click(function(){
    currentPosition = $('.imgHolder').index(this);
    $('#slideShow').width(slideWidth);
  // Remove scrollbar in JS
  $('#slideContainer').css('overflow', 'hidden');
  // Wrap all .slides with #slideInner div
  slides.css({
    'float' : 'left',
    'width' : slideWidth
  });
    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', (slideWidth * numberOfSlides));
    // Hide left arrow control on first load
    manageControls(currentPosition);
    $('#slideInner').css('margin-left' , slideWidth*(-currentPosition));
    //changeSize(); used to be here
    $('#filter').show();
    $('#photoWrap').show();
            //Change image scale and center
    changeSize();
});

这里是changeSize（）函数，它执行缩放和居中

 function changeSize(){
  currentSlide = $('.slide').get(currentPosition);
  currentImg = $(currentSlide).children('img:first')[0];
  imgRatio =  $(currentImg).height() / $(currentImg).width(); 
if(imgRatio < slideRatio)
{
    $(currentImg).addClass('landscape');
    //Vertically align
    var thisHeight = $(currentImg).height();
    $(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2));
}else{
    $(currentImg).addClass('portrait');
}

}

$('#gallery ul li').each(function() {
    var img = $(this).children('div').children('img').first();
    var ratio = img.height() / img.width();
    var goal = img.parent('div').height() / img.parent('div').width();
    if (ratio < goal) {
        img.addClass('portrait');
        img.css('margin-left', -(img.width() / 2) + ($(this).children('div').width() / 2));
    } else {
        img.css('width', '100%');
    }
});

在这里，我从代码中删除了不必要的$()实例，因为您已经选择了在设置img变量时要调用方法的元素。我怀疑这种裁员是否是最终问题，但这是一个很好的起点。

 

将您的代码更新为这个，让我们从那里进行调试。

编辑：

我想我发现了你的错误（好吧，我至少发现了一个）：

function configGallery()
{
var currentPosition;
var slides = $('.slide')
var currentSlide;
var currentImg;
var slideWidth = 720;
var numberOfSlides = slides.length;
...
}

你看到这里出了什么问题吗？您忘记了var slides = $('.slide')后面的分号，这可能是您的问题。老实说，我很惊讶你的任何一个脚本都运行了。缺少分号通常会破坏整个过程。

更新：

当你有机会时，这里还有一些选择器可以让你删除$（）：

function changeSize(){
      currentSlide = $('.slide').get(currentPosition);
      currentImg = $(currentSlide).children('img').first();
      imgRatio =  $(currentImg).height() / $(currentImg).width(); 
    if(imgRatio < slideRatio)
    {
        $(currentImg).addClass('landscape');
        //Vertically align
        var thisHeight = $(currentImg).height();
        $(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2));
    }else{
        $(currentImg).addClass('portrait');
    }
}

 

更新：

好吧，我给你写了一个小小提琴来帮助你重新编写你的图像大小函数。我会把它整理好，放在一个插件里给你。

更新：

在一个快速而肮脏的插件中，这里又有同样的功能：http://jsfiddle.net/Wj3RM/3/不过，我并没有把它修饰好——我想你这样适应和修改会更容易。

相关文章：