CSS显示会影响jQuery/Javascript吗？

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

我在这里有一个画廊：

我已经添加了一些函数，可以调整此图库中图像的大小，以便它们可以缩放到预览图像的大小。正如您所看到的，最后一张图像是全景图像，即使我有javascript命令它调整大小，它也不会填满div的整个高度

如果刷新页面，javascript似乎会突然工作，并且图片会按应有的比例缩放

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

如果您查看注释的

changeSize（）

函数的位置，那就是我以前使用该函数的位置，但缩放不起作用。然后，我在显示幻灯片的.show（）函数之后移动了它，现在它可以工作了。因此显示：无；影响javascript的启动方式，因为在我调试时，currentImg对象为null，就好像.slides选择器在设置为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');
}


}

函数changeSize（）{
currentSlide=$（'.slide'）.get（currentPosition）；
currentImg=$（currentSlide）.children（'img:first'）[0]；
imgRatio=$（当前img）.height（）/$（当前img）.width（）；
如果（默认<滑动）
{
$（currentImg）.addClass（'landscape'）；
//垂直对齐
var thishheight=$（currentImg）.height（）；
$（currentImg）.css（'margin-top'，（$（'#slideShow'）.height（）/2）-（thishheight/2））；
}否则{
$（currentImg）.addClass（'纵向'）；
}
}

你看到这里怎么了吗？您在

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');
    }
}

函数changeSize（）{
currentSlide=$（'.slide'）.get（currentPosition）；
currentImg=$（currentSlide）.children（'img'）.first（）；
imgRatio=$（当前img）.height（）/$（当前img）.width（）；
如果（默认<滑动）
{
$（currentImg）.addClass（'landscape'）；
//垂直对齐
var thishheight=$（currentImg）.height（）；
$（currentImg）.css（'margin-top'，（$（'#slideShow'）.height（）/2）-（thishheight/2））；
}否则{
$（currentImg）.addClass（'纵向'）；
}
}

更新：

好的，我写了一篇文章来帮助你重新编写图像大小函数。我会把它整理好，放进插件里

更新：

在一个又快又脏的插件中，这里有同样的功能： 不过我并没有美化它——我想这样适应和修改会更容易

你看到这里怎么了吗？您在

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');
    }
}

函数changeSize（）{
currentSlide=$（'.slide'）.get（currentPosition）；
currentImg=$（currentSlide）.children（'img'）.first（）；
imgRatio=$（当前img）.height（）/$（当前img）.width（）；
如果（默认<滑动）
{
$（currentImg）.addClass（'landscape'）；
//垂直对齐
var thishheight=$（currentImg）.height（）；
$（currentImg）.css（'margin-top'，（$（'#slideShow'）.height（）/2）-（thishheight/2））；
}否则{
$（currentImg）.addClass（'纵向'）；
}
}

更新：

好的，我写了一篇文章来帮助你重新编写图像大小函数。我会把它整理好，放进插件里

更新：

在一个又快又脏的插件中，这里有同样的功能：

---

不过，我并没有对它进行修饰-我想这样做会更容易适应和修改。

首先，我建议您修改函数，改为说

currentImg=$（currentSlide）.children（“img”）.first（）使用
img:first
需要更多的开销，这实际上可以解决问题-有时这些问题是由于脚本花费的时间太长造成的。我会继续看…你在文件上的高度是在哪里缩放的。准备好了吗？谢谢。我会把它改一下，然后试试看。是的，在document.ready上，我调用一个函数来初始化所有这些变量，然后等待触发这些事件。就好像javascript试图在图像实际准备好之前访问图像一样，顺便说一句，我在一秒钟前更改了路径，我刚刚用网页的新路径更新了上面的链接，任何HTML元素的宽度都是
display:none将为0。这就是为什么在将调整大小函数移到show函数之后之前出现问题的原因。首先，我建议您修改函数，改为说
currentImg=$（currentSlide）.children（“img”）.first（）使用
img:first
需要更多的开销，这实际上可以解决问题-有时这些问题是由于脚本花费的时间太长造成的。我会继续看…你在文件上的高度标在哪里了。准备好了吗？谢谢。我会换的
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');
    }
}