jquery - 每 X 毫秒移动背景图像 X 像素

标签 jquery css

我有一个 image sprite of sorts 1 个按钮有多个框架。我希望使用 jQuery 在链接/按钮翻转时通过框架“播放”。目前图像使用 CSS 设置为按钮的背景,所以我希望每隔 ~30ms 沿 Y 轴改变背景位置 ~40px(但我可以改变方向)10x 所以它最终移动 ~400px .

我已经尝试在 jQuery 中使用动画和修改后的背景位置插件,类似于 shown here但它或多或少地将背景图像逐像素向上移动,而不是设置像素跳跃。

还有更好的选择吗?

最佳答案

如果您只想四处移动背景图像,则可以使用 setInterval。这是基本思路(我没有测试过所以它可能不完美/有错误)

function moveImage() {
var x = parseInt( $(selector).css("backgroundPositionx") );
var y = parseInt( $(selector).css("backgroundPositiony") );
$(selector).css("backgroundPositionx",x+change_in_x);
$(selector).css("backgroundPositiony",y+change_in_y);
}

document.setInterval(moveImage,numberofmilliseconds);

编辑:更正错误

关于jquery - 每 X 毫秒移动背景图像 X 像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1387205/

相关文章:

javascript - 为什么我的 3 个 Highcharts 饼图/图表中只显示了 2 个

javascript - Angular : Add class after page load

javascript - 防止 .ajaxStart() 在特定的 Ajax 请求上执行

c# - $.getJSON 不在回调中解析对象

javascript - 如何让页脚固定在底部?

javascript - CSS jQuery - 展示图像(淡入淡出)

css - 如何在浏览器中轻松比较样式?

javascript - Marker 的 Z-index 高于 Infobox

javascript - jQueryUI Draggable Helper 选项帮助

javascript - 通过 jquery/ajax 使用谷歌地图地理编码从纬度/经度获取城市/州?