上周我有一个关于如何构建这个脚本的非常有用的答案，除了一个小问题外，它的效果很好。用视觉辅助http://avalon.eaw.com/#finishes
解释最容易这使用backgroundPosition属性为颜色更改设置动画。唯一的问题是“喇叭”选项是硬编码的，这样如果你正在观看一个带有彩色喇叭的白色驾驶室且想要将机柜改为黑色的扬声器，它也会将喇叭变为黑色。目前无法查看带有彩色喇叭的黑色驾驶室。
修复它我需要制作一个条件语句，但我不确定如何使其工作。
之类的东西function colorChange() {
// Use xposition and yposition which are changed by JS function above
$("#target").css('background-position', xposition+'px '+yposition+'px');
if$("#target").css('background-position') == {x:-754}
updatePositions({x:-377});
if$("#target").css('background-position') == {x:-377}
updatePositions({x:-754});
}
//////编辑/////// 主持人刚刚删除了我发布的这个问题的后续内容，以便尝试帮助找到答案。感谢主持人禁止任何可能的帮助！我越来越对这个论坛感到沮丧。无论如何，我已将其转发给下方，希望有人可以帮助找到解决方案。
我有一个不能正常工作的答案，但希望它会帮助有人找到一个可以工作的答案。在对jquery简写做了一些阅读后，我试着为橱柜 - 钢琴样本制作一个单独的功能：
function colorChangePiano() {
var bp = $("background-position").css;
$("#target").css("background-position", (bp = {x:-1131}) ? "{x:-377}" : "{x:0}");
}
我知道语法本身有问题，但更大的问题是它没有用于驱动其余样本的函数：
// variable outside of function() scope
var xposition,
yposition;
// Update values of xposition and or yposition
function updatePositions(axes) {
// Check to see which axis was passed in x, y or both, then update values
if (typeof(axes.x) !== 'undefined') xposition = axes.x;
if (typeof(axes.y) !== 'undefined') yposition = axes.y;
//Call function to actually move BG image
colorChange();
}
// Function move BG image, using variables declared above
function colorChange() {
// Use xposition and yposition which are changed by JS function above
$("#target").css('background-position', xposition+'px '+yposition+'px');
}
为了通过，这里有一些html调用的例子：
<a href="#" onclick="updatePositions({x:-1131})"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a>
<a href="#machine" onclick="updatePositions({y:-999})"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p>
<a href="#" onclick="updatePositions({x:-754})"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a></a>
<a href="#" onclick="updatePositions({x:0})"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a>
这个网站今晚必须上线，我开始有点吓坏了。有没有人有任何见解？
答案 0 :(得分：0)
感谢我的好朋友（和非常聪明的）朋友Eli Huntington有一个答案 - 尽管这是一个非常复杂的答案。这是工作网站的链接，以及与此问题相关的代码片段。希望它能帮助其他一些可怜的灵魂。这里有一个相关的主题（jquery background change one axis only）有一个更简单的相关问题，我希望得到回答。只有 是一种更简单的方法。
脚本:( finishScroll和finishScroll2是localScroll插件函数与此特定问题无关）
// FINISHES SCRIPT //
// Make an object to hold various information about the application
finishes = {
cabinets: { // Columns
colors: ['polar', 'piano'], // Add new cabinet colors here
/*
* New cabinet colors are represented in columns and can be
* added to the sprite to the right edge.
* After adding two new columns to the Sprite
* add the following after polar_custom: '-1131px' (don't forget comma):
*
* anycolor_standard: '-1508px' //(i'm guessing)
* anycolor_custom: '-1885px' //(also guessing)
*
*/
piano_standard : '0px', // Column where horn matches grill
piano_custom : '-377px', // Column where horn is custom color
polar_standard : '-754px',
polar_custom : '-1131px'
},
colors: { // Rows
// New colors can be added to the sprite at the bottom and then added last here with the position (from the sprite)
siren: '0px',
medallion: '-333px',
starlight: '-666px',
machine: '-999px'
},
current_cabinet_color: 'piano', // Will be updated by click events to updateCabinet
current_grille_color: 'siren', // Will be udpated by click events to updateCabinet
current_horn_color: 'standard' // Will be udpated by click events to updateCabinet
};
function updateCabinet(component, color) {
if(!component || !color) return false; // Exit if missing values
// Take component and update the 'finishes' object above based on which part we are changing
switch(component) {
case 'cabinet':
finishes.current_cabinet_color = color;
break;
case 'horn':
if(color != 'piano' && color != 'polar') {
finishes.current_horn_color = 'custom';
} else {
finishes.current_horn_color = 'standard';
}
break;
case 'grille':
finishes.current_grille_color = color;
break;
default:
return false; // Invalid component name passed in
}
// Now that we have updated the 'finishes' object, we can get our xpos and ypos values from it
xpos = finishes.cabinets[finishes.current_cabinet_color + '_' + finishes.current_horn_color];
ypos = finishes.colors[finishes.current_grille_color];
// Finally make sure we have good values for xpos and ypos and do the CSS udpate
if(xpos && ypos) {
$('#target').css('background-position', xpos+' '+ypos );
}
return true;
}
HTML：
<!-- FINISHES -->
<div id="finishes" class="item"><a name="finishes"></a>
<div id="swatches" class="content">
<div class="finishscroll">
<p class="text">Avalon by EAW represents a radical departure from any dance club loudspeaker ever created, including our own original Avalon Series. Everything about Avalon by EAW breaks new ground. The system design turns the loudspeaker inside-out, mounting the MF/HF horn outside the grille. And the grille - concave and sculpted in clean, straight lines - expresses the symmetry that unifies the design.</p>
<div id="target"></div>
<div id="label-cab" class="label">cabinet</div>
<ul id="swatch-cab" class="swatch">
<li class="patch"><a href="#piano" onclick="updateCabinet('cabinet','piano')"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a></li>
<li class="patch"><a href="#polar" onclick="updateCabinet('cabinet','polar')"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a></li>
</ul>
<div id="label-horn" class="label">horn</div>
<div id="content-finishscroll" class="swatch">
<div class="scroll-section">
<ul>
<li id="piano" class="patch">
<a href="#" onclick="updateCabinet('horn','piano')"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a>
</li>
<li id="polar" class="patch">
<a href="#" onclick="updateCabinet('horn','polar')"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a>
</li>
</ul>
</div>
</div>
</div>
<div class="finishscroll2">
<div id="label-grille" class="label">grille</div>
<ul id="swatch-grille" class="swatch">
<li class="patch"><a href="#siren" onclick="updateCabinet('grille','siren')"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a></li>
<li class="patch"><a href="#medallion" onclick="updateCabinet('grille','medallion')"><img src="/images/cabinets/swatches/swatch-medallion.jpg" /><p>medallion</p></a></li>
<li class="patch"><a href="#starlight" onclick="updateCabinet('grille','starlight')"><img src="/images/cabinets/swatches/swatch-starlight.jpg" /><p>starlight</p></a></li>
<li class="patch"><a href="#machine" onclick="updateCabinet('grille','machine')"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p></a></li>
</ul>
<div id="content-finishscroll2">
<div class="swatch" style="width:73px;">
<ul>
<li id="siren" class="patch">
<a href="#" onclick="updateCabinet('horn','siren')"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a>
</li>
<li id="medallion" class="patch">
<a href="#" onclick="updateCabinet('horn','medallion')"><img src="/images/cabinets/swatches/swatch-medallion.jpg" /><p>medallion</p></a>
</li>
<li id="starlight" class="patch">
<a href="#" onclick="updateCabinet('horn','starlight')"><img src="/images/cabinets/swatches/swatch-starlight.jpg" /><p>starlight</p></a>
</li>
<li id="machine" class="patch">
<a href="#" onclick="updateCabinet('horn','machine')"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p></a>
</li>
</ul>
</div>
</div>
</div>
<div style="position:absolute; top:450px; left:-60px"><img src="http://avalon.eaw.com/images/shadow-finishes.png" /></div>
</div>
</div><!-- #finishes -->
快乐的编码！