2

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

示例： http: //www.mudquarters.com（点击“in stores”）

我想默认为蓝色衬衫，当您单击样本时，它们会将 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>
4

3 回答 3

0

您可以尝试几件事……但我不能确定。

为了让蓝色衬衫默认显示，您可以不更改图像的顺序并将蓝色衬衫放在最后吗？ 

<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 的样式

祝你好运！

于 2013-08-21T00:44:40.477 回答
0

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
})
于 2013-08-21T01:02:56.690 回答
0

修复

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

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

问题2：绝对定位元素的问题是它们在流之外，所以父母不能调整它们的高度。唯一的解决办法是明确设置高度，从詹姆斯戴利的回答中记下你需要这样的东西（在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);
        });
    }
});
于 2013-08-21T07:17:55.490 回答