1

我正在学习 Jquery，并且对一段代码有一些小问题......这里是：

$('.product-box .thumb a').click(function(event) {
    event.preventDefault();
    src = $(this).find('img').attr('src')
    $('.products .product-box .image img.principal').fadeOut('fast', function() {
        $('.products .product-box .image img.principal').attr('src', src);
        $('.products .product-box .image img.principal').fadeIn('fast');
    });
    $('.products .product-box .zoom a.principal').attr('href', src);
});

这是HTML：

  <div class="product-box">
    <div class="image">
      <img src="<?php echo $FOTO; ?>" class="principal" alt="<?php echo $NOME; ?>">
      <div class="zoom"><a class="fancybox lupa principal"  rel="group" href="<?php echo $FOTO; ?>">ampliar</a></div>

      <div class="thumb">
        <a href="#"><img src="http://fernandonagao.com.br/img/logo.png" alt="<?php echo $NOME; ?>"></a>
        <a href="#"><img src="<?php echo $FOTO; ?>" alt="<?php echo $NOME; ?>"></a>
        <a href="#"><img src="<?php echo $FOTO; ?>" alt="<?php echo $NOME; ?>"></a>
      </div>

    </div>
    <div class="desc-prod">
      <h1><?php echo $NOME; ?></h1>
      <p>
        <?php echo $DESC_PRODUTO; ?>
      </p>
      <span><!-- R$ --> <?php echo $VALOR; ?></span>
      <!--<span>Cores Disponíveis:</span>
      <div class="color" style="background-color:#dc5f1b"></div><div class="color" style="background-color:#89ca06"></div><div class="color" style="background-color:#d3bb8c"></div><div class="color" style="background-color:#ce925a"></div>-->
      <span class="voltar"><a href="produtos.php?categoria=<?php echo $categoria; ?>">< Voltar às Categorias</a></span>
    </div><!-- desc-prod -->
  </div><!-- product-box -->

所以，我想淡化产品上的图像，把它src放在正确的位置，你可以在这里看到一切都很好，除了页面行为链接行为，并将窗口聚焦在顶部，我没有知道为什么。首先，我尝试了没有链接的相同代码，只有图像，同样的事情发生了。一些想法？

谢谢！！！

4

3 回答 3

1

导航被阻止，但您淡出图像，最终将其从页面中隐藏。当图像的区域被视觉移除时，页面会自动滚动到顶部，因为页面变得不那么高了。之后，您会淡入新图像，但必要的滚动已经发生。

您想要的是将图像包装在<div>具有固定大小的容器（例如 a ）中，以便容器保持其大小。这样，不会发生滚动，因为即使里面的图像被隐藏，容器也会不断占用空间。不过，看起来您已经对图像应用了填充。您最好也将其移动到容器中，以便填充在过渡期间也保持不变。

于 2012-09-26T14:34:37.073 回答
1

爱德华多，

尝试更改您的代码

$('.product-box .thumb a').click(function(event) {

至

$('.product-box').delegate('.thumb a', 'click', function(event) {

在jQuery中很重要当代码执行时，一般规则，您需要等待文档加载

$(function(){
  // put your code here
});
于 2012-09-26T14:31:35.080 回答
0

e.preventDefault 单独是不够的，你应该在最后返回 false

于 2012-09-26T14:32:08.073 回答