使用jQuery进行背景定位在IE7中不起作用(Background positioning with jquery doesn't work in IE7)

使用jQuery进行背景定位在IE7中不起作用(Background positioning with jquery doesn't work in IE7)

点击按钮时，我的脚本应该动态改变背景位置（从当前值增加或减少1％）。 在Fx和Chrome中工作正常，ie8也是（我相信），但不在ie7中。

这是我的代码：

function makeClicker(index) { $('#leftbutton' + index).click(function() { var bPos = $('#div' + index).css('background-position'); bPos = bPos.replace(/%/g, '').split(' '); var bPosResult = (1 + parseInt(bPos[0], 0)); bPos = bPosResult + '% ' + bPos[1] + '%'; $('#div' + index).css('background-position', bPos); $('#vposition' + index).attr("value", bPosResult + '%'); }); $('#rightbutton' + index).click(function() { var bPos = $('#div' + index).css('background-position'); bPos = bPos.replace(/%/g, '').split(' '); var bPosResult = (-1 + parseInt(bPos[0], 0)); bPos = bPosResult + '% ' + bPos[1] + '%'; $('#div' + index).css('background-position', bPos); $('#vposition' + index).attr("value", bPosResult + '%'); }); $('#upbutton' + index).click(function() { var bPos = $('#div' + index).css('background-position'); bPos = bPos.replace(/%/g, '').split(' '); var bPosResult = (1 + parseInt(bPos[1], 0)); bPos = bPos[0] + '% ' + bPosResult + '%'; $('#div' + index).css('background-position', bPos); $('#hposition' + index).attr("value", bPosResult + '%'); }); $('#downbutton' + index).click(function() { var bPos = $('#div' + index).css('background-position'); bPos = bPos.replace(/%/g, '').split(' '); var bPosResult = (-1 + parseInt(bPos[1], 0)); bPos = bPos[0] + '% ' + bPosResult + '%'; $('#div' + index).css('background-position', bPos); $('#hposition' + index).attr("value", bPosResult + '%'); }); } for(var i = 1; i <= 5; i++) makeClicker(i);

感谢任何有关可能导致此问题的建议。 -Simon

My script is supposed to dynamically change the background-position when clicking on a button (adding or substracting 1 percent from the current value). Works fine in Fx and Chrome, and ie8 too (i believe), though not in ie7.

Here's my code:

function makeClicker(index) { $('#leftbutton' + index).click(function() { var bPos = $('#div' + index).css('background-position'); bPos = bPos.replace(/%/g, '').split(' '); var bPosResult = (1 + parseInt(bPos[0], 0)); bPos = bPosResult + '% ' + bPos[1] + '%'; $('#div' + index).css('background-position', bPos); $('#vposition' + index).attr("value", bPosResult + '%'); }); $('#rightbutton' + index).click(function() { var bPos = $('#div' + index).css('background-position'); bPos = bPos.replace(/%/g, '').split(' '); var bPosResult = (-1 + parseInt(bPos[0], 0)); bPos = bPosResult + '% ' + bPos[1] + '%'; $('#div' + index).css('background-position', bPos); $('#vposition' + index).attr("value", bPosResult + '%'); }); $('#upbutton' + index).click(function() { var bPos = $('#div' + index).css('background-position'); bPos = bPos.replace(/%/g, '').split(' '); var bPosResult = (1 + parseInt(bPos[1], 0)); bPos = bPos[0] + '% ' + bPosResult + '%'; $('#div' + index).css('background-position', bPos); $('#hposition' + index).attr("value", bPosResult + '%'); }); $('#downbutton' + index).click(function() { var bPos = $('#div' + index).css('background-position'); bPos = bPos.replace(/%/g, '').split(' '); var bPosResult = (-1 + parseInt(bPos[1], 0)); bPos = bPos[0] + '% ' + bPosResult + '%'; $('#div' + index).css('background-position', bPos); $('#hposition' + index).attr("value", bPosResult + '%'); }); } for(var i = 1; i <= 5; i++) makeClicker(i);

Thanks for any advices on what could cause this. -Simon

最满意答案

对于Internet Explorer，您需要使用background-position-x和background-position-y属性。

这里有一个关于如何支持IE的例子。 我还重构了一下代码以减少冗余：

function makeClicker(index) { var el = ['#leftbutton'+index, '#rightbutton'+index, '#upbutton'+index, '#downbutton'+index]; $(el).click(function() { var bPosResult; var bPos = $('#div' + index).css('background-position').replace(/%/g, '').split(' '); switch($(this).attr('id')) { case 'leftbutton': bPosResult = (1 + parseInt(bPos[0], 0)); bPos = bPosResult + '% ' + bPos[1] + '%'; break; case 'rightbutton': bPosResult = (-1 + parseInt(bPos[0], 0)); bPos = bPosResult + '% ' + bPos[1] + '%'; break; case 'upbutton': bPosResult = (1 + parseInt(bPos[1], 0)); bPos = bPos[0] + '% ' + bPosResult + '%'; break; case 'downbutton': bPosResult = (-1 + parseInt(bPos[1], 0)); bPos = bPos[0] + '% ' + bPosResult + '%'; break; } // Detect IE if(!$.support.cssFloat) { $('#div' + index).css({ backgroundPositionX: bPos.split[' '][0], backgroundPositionX: bPos.split[' '][1] }); } else { $('#div' + index).css('background-position', bPos); } $('#vposition' + index).attr("value", bPosResult + '%'); }); }

我没有测试过，但它应该工作。

For Internet Explorer, you need to use the background-position-x and background-position-y attributes.

Here's an example on how you can support IE also. I also refactored your code a bit to reduce redundancy:

function makeClicker(index) { var el = ['#leftbutton'+index, '#rightbutton'+index, '#upbutton'+index, '#downbutton'+index]; $(el).click(function() { var bPosResult; var bPos = $('#div' + index).css('background-position').replace(/%/g, '').split(' '); switch($(this).attr('id')) { case 'leftbutton': bPosResult = (1 + parseInt(bPos[0], 0)); bPos = bPosResult + '% ' + bPos[1] + '%'; break; case 'rightbutton': bPosResult = (-1 + parseInt(bPos[0], 0)); bPos = bPosResult + '% ' + bPos[1] + '%'; break; case 'upbutton': bPosResult = (1 + parseInt(bPos[1], 0)); bPos = bPos[0] + '% ' + bPosResult + '%'; break; case 'downbutton': bPosResult = (-1 + parseInt(bPos[1], 0)); bPos = bPos[0] + '% ' + bPosResult + '%'; break; } // Detect IE if(!$.support.cssFloat) { $('#div' + index).css({ backgroundPositionX: bPos.split[' '][0], backgroundPositionX: bPos.split[' '][1] }); } else { $('#div' + index).css('background-position', bPos); } $('#vposition' + index).attr("value", bPosResult + '%'); }); }

I haven't tested that but it should work.