jquery背景只改变一个轴

Posted 2023-05-08

【中文标题】jquery背景只改变一个轴

【英文标题】：jquery background change one axis only

【发布时间】：2012-06-15 22:17:04

【问题描述】：

我认为我的最后一个问题让每个人都不知所措，所以我将简化

我正在尝试仅更改 x 轴的背景位置。默认如果只定义一个值，另一个默认为50%，所以这个函数：

function colorChangePiano() 
    var bp = $("background-position").css;
    $("#target").css('background-position', (bp == -1131) ? '-377' : '0');

返回背景位置：0 50%;

如何修改函数以改变 x 轴但保持 y 轴不变？

已编辑 --> 这是一个 4 列 4 行的精灵，因此 y 轴应该保持动态。工作地点在这里：http://www.avalonbyeaw.com 点击“完成”。我们让它在现场网站上使用了一些疯狂的复杂脚本，但我还是会把它留在这里，因为我仍然很想找到解决这个问题的方法

【参考方案1】：

我会这样做。

$('#target').css('background-position', function(i, backgroundPosition) 
    return backgroundPosition.replace(/\d+px/, '60px');
);

【讨论】：

如果这是一个愚蠢的问题，请原谅我，但我是一个 javascript 婴儿。我如何在 html 中调用它？

你真的可以在那里放一个函数吗？直到现在我才知道。谢谢。

@alex 我还在想你会怎么称呼它。我没有看到要包含在 <a> 标记中的函数名称

@alex，不错的一个 :) 也许将 Kristina 的功能与您的解决方案一起实施，作为您回答的一部分，以阐明她将如何解决问题，这对所有人都有帮助！ （然后她可以接受答案）并关闭此问题！

@kristinachilds 这段代码不应该与任何与 tag 相关的东西相关联。如果您希望它为a 元素的click 事件触发，则将其与$('a').click(function() ... ); 绑定。

【参考方案2】：

将 2 个值添加到 background-position（如预期的那样）。还将当前位置保存在一个变量中，这样更容易。

var pos = -377;
var colorChangePiano = function() 
  if (pos == -377) 
    pos = -1131
  
  else 
    pos = -377
  
  $('#target').css(
    'backround-position': pos + 'px 0px' // will result in "Xpx 0px"
  );

【讨论】：

hmmm...我替换了代码，但似乎不起作用。 html 调用是否仍应为 onClick="colorChangePiano()"？

在需要执行的时候一定要调用这个函数！！我也不确定应该插入哪些值，因此如果您不想按像素对齐，请更改为 %。

当然哈哈！但这仍然是正确的电话，对吧？只是想确保它不工作，因为 html