Question

我不认为我这样做是最好的方式。这是一个更好的方法吗？

示例：http://www.mudquarters.com（点击“在商店中”）

我想默认使用蓝色衬衫，当您点击样本时，他们会将div中的图像交换为适当的颜色。它们现在有点工作，但它默认为黄色而不是蓝色，这个方法要求我的css包含position: "absolute"，这会在我的响应式布局中破坏我的背景平铺，因为它在容器外部打破。

有没有办法更好地做到这一点？

CSS：

#shirt img {
    position:absolute;
}

HTML：

<ul id="swatches">
  <li><a href="#"><img src="img/BTN_Blue.gif"></a></li>
  <li><a href="#"><img src="img/BTN_Green.gif"></a></li>
  <li><a href="#"><img src="img/BTN_Red.gif"></a></li>
  <li><a href="#"><img src="img/BTN_Grey.gif"></a></li>
  <li><a href="#"><img src="img/BTN_Yellow.gif"></a></li>
</ul>

<div id="shirt" class="large-6 columns">
  <img src="img/T_Blue.png">
  <img src="img/T_Green.png">
  <img src="img/T_Red.png">
  <img src="img/T_Grey.png">
  <img src="img/T_Yellow.png">
</div>

JS：

<script>
$('#swatches li').on('mousedown',function(e){
    $('#shirt img').stop().fadeTo(300,0);
    if (e.type=='mousedown') {
        $('#shirt img').eq( $(this).index() ).stop().fadeTo(300,1);
    }
});
</script>

Answer 1

你可以尝试一些事情......但我无法确定。

要默认显示蓝色衬衫，你能否改变图像的顺序并将蓝色衬衫放在最后？

<div id="shirt" class="large-6 columns">
<img src="img/T_Green.png">
<img src="img/T_Red.png">
<img src="img/T_Grey.png">
<img src="img/T_Yellow.png">  
<img src="img/T_Blue.png">
</div>

对于背景平铺，请尝试将overflow:auto;添加到#stores

的样式中祝你好运！

Answer 2

CSS

.zindex { z-index: 10}

修改

尝试使父div与图像一样高

的javascript

    var $firstImage = $('#shirt img:first-child'); // cache
    var imageHeight = $firstImage.height();
    $firstImage.addClass('zindex');
    var $shirtImage = $('#shirt img')
    $('#shirt').height(imageHeight);
    $('#swatches li').on('mousedown',function(e){
        $shirtImage.removeClass('zindex').stop().fadeTo(300,0);
        if (e.type=='mousedown') {
            $shirtImage.eq( $(this).index() ).stop().fadeTo(300,1);
        }
    });

当屏幕较小时，你看起来根本不会改变图像大小，如果是这样的话，你总是可以将它包装在一个函数中并在它上面调用

$(window).resize(function() {
// your code here
})

Answer 3

修复

问题1：为了默认使用蓝色衬衫，您可以在页面加载时隐藏所有其他图片：

$('#shirt img').not(':first').fadeOut(0);

问题2：绝对定位元素的问题在于它们在流量之外，因此父母无法调整其高度。对此的唯一解决方法是明确设置高度，从James Daly的回答中记下你需要这样的东西（在resize事件中以适应你的流体布局）：

$(window).resize(function() {
    $('#shirt').height($('$shirt img:first').height());
});
$(window).trigger('resize');

新方法

现在，如果您不想实施此修补程序，则可以将逻辑更改为仅使用一个图像并通过单击样本更新其src，从而有效地消除了这两个问题，因为不存在需要再使用绝对位置，您可以轻松地将默认图像设置为蓝色。这个新的实现看起来像这样：

<强> HTML

<ul id="swatches">
  <!--Add the reference to the main img src of each link as a data-attribute-->
  <li><a href="#" data-img-src="img/T_Blue.png"><img src="img/BTN_Blue.gif"></a></li>
  <li><a href="#" data-img-src="img/T_Green.png"><img src="img/BTN_Green.gif"></a></li>
  <li><a href="#" data-img-src="img/T_Red.png"><img src="img/BTN_Red.gif"></a></li>
  <li><a href="#" data-img-src="img/T_Grey.png"><img src="img/BTN_Grey.gif"></a></li>
  <li><a href="#" data-img-src="img/T_Yellow.png"><img src="img/BTN_Yellow.gif"></a></li>
</ul>

<div id="shirt" class="large-6 columns">
  <img src="img/T_Blue.png"> <!--Set blue as default-->
</div>

<强>的jQuery

var $shirtImg = $('#shirt img');
$('#swatches li a').on('mousedown',function(e){
    var src = $(this).data('img-src');    
    if(src != $shirtImg.attr('src')){ //Check if it's not the image we have now
        $shirtImg.stop().fadeTo(150,0.8,function(){
            $(this).attr('src',src).fadeTo(150,1);
        });
    }
});

JQuery在div中更改图像

3 个答案:

修复

新方法