苹果iPhone5c网站喜欢颜色组合选择器

Question

我正在网上浏览找到一个jQuery插件，可以在iPhone 5c的网页上为我提供类似的产品颜色选择器。我认为这是我找到Product Colorizer最接近的jQuery插件。但这不是我想要的，因为我alrady有产品的不同颜色组合的图像，我希望它的工作类似于iPhone5c的网页。我希望你们能帮助我，谢谢。

Answer 1

我已经使用了Apple页面的图像并自己创建了CSS。 CSS需要改进，但我刚刚做了一个简单的例子。

HTML

<ul>
    <li><a class="green"></a></li>
     <li><a class="blue"></a></li>
     <li><a class="yellow"></a></li>
</ul>

CSS

ul{
    list-style: none;
}

ul li{
    display: inline-block; 
}

ul li a {
    z-index: 1;
    background: no-repeat 0 0;
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    height: 40px;
    width: 40px;
}

.green{
    background-image: url(https://www.apple.com/v/iphone-5c/a/images/colornav_green.png);
}

a.green:hover {
    background: url(https://www.apple.com/v/iphone-5c/a/images/colornav_green.png) 0px 40px;
}

.blue{
    background-image: url(https://www.apple.com/v/iphone-5c/a/images/colornav_blue.png);
}

a.blue:hover {
    background: url(https://www.apple.com/v/iphone-5c/a/images/colornav_blue.png) 0px 80px;
}

.yellow{
    background-image: url(https://www.apple.com/v/iphone-5c/a/images/colornav_yellow.png);
}

a.yellow:hover {
    background: url(https://www.apple.com/v/iphone-5c/a/images/colornav_yellow.png) 0px 80px;
}

第一个鼠标悬停设置为“有效”链接。

http://jsfiddle.net/06p951dv/

---

如果您想要点击“选定”图像，可以使用以下代码：

$(document).ready(function(){
    var oldButton = null;
    $('ul li a').on('click', function(){
        if (oldButton){
            $(oldButton).removeClass('selected');
        }
        oldButton = this;
        $(this).addClass('selected');
    });
});

http://jsfiddle.net/06p951dv/2/

---

iPhone图像的示例

您必须添加以下CSS：

#green, #blue, #yellow{
    display: none;
}

..并关注JavaScript

$(document).ready(function(){
    var oldButton = null;
    $('ul li a').on('click', function(){
        if (oldButton){
            $(oldButton).removeClass('selected');
            if ($(this).attr('class') !== $(oldButton).attr('class')){ // added
                $('#' + $(oldButton).attr('class')).toggle('slow');
            } // end added
        }
        if ($(this).attr('class') !== $(oldButton).attr('class')){ // added
            $('#' + $(this).attr('class')).toggle('slow');
        } // end added
        oldButton = this;
        $(this).addClass('selected');
    });
});

还有一些额外的HTML：

<img id="green" src="https://www.apple.com/iphone-5c/home/images/color_green_none.jpg#gallery-cases-green-none" />
<img id="blue" src="https://www.apple.com/iphone-5c/home/images/color_blue_none.jpg#gallery-cases-blue-none" />
<img id="yellow" src="https://www.apple.com/iphone-5c/home/images/color_yellow_none.jpg#gallery-cases-yellow-none" />

http://jsfiddle.net/06p951dv/3/

---

更新

我注意到Apple使用常见的图像名称模式也改善了编码。他们使用https://www.apple.com/iphone-5c/home/images/color_"+phoneColor+"_"+phoneCase+".jpg#gallery-cases-"+phoneColor+"-"+phoneCase作为图片网址。现在可以很容易地设置正确的图像：

<强> HTML

<ul id="phone">
    <li><a class="green"></a></li>
     <li><a class="blue"></a></li>
     <li><a class="yellow"></a></li>
</ul>
<ul id="case">
    <li><a class="green"></a></li>
     <li><a class="blue"></a></li>
     <li><a class="yellow"></a></li>
</ul>

<img id="img" src="" />

<强>的JavaScript

$(document).ready(function(){
    var oldButton = null;
    var oldCase = null;
    var phoneColor = "green";
    var phoneCase = "none";
    $('#phone li a').on('click', function(){
        if (oldButton){
            $(oldButton).removeClass('selected');
        }
        phoneColor = $(this).attr('class').replace(" selected", "");
        setSrc();
        oldButton = this;
        $(this).addClass('selected');
    });

    $('#case li a').on('click', function(){
        if (oldCase){
            $(oldCase).removeClass('selected');
        }
        phoneCase = $(this).attr('class').replace(" selected", "");
        setSrc();
        oldCase = this;
        $(this).addClass('selected');
    });

    var setSrc = function(){
         $('#img').attr("src", "https://www.apple.com/iphone-5c/home/images/color_"+phoneColor+"_"+phoneCase+".jpg#gallery-cases-"+phoneColor+"-"+phoneCase);
    };
});

<强>小提琴 http://jsfiddle.net/06p951dv/5/