点击按钮时,我的脚本应该动态改变背景位置(从当前值增加或减少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.
更多推荐
发布评论