javascript - 带有 jquery 的 CSS Sprites

Question

我想用 javascript/jquery 控制一个 css sprite。根据用户输入，图像应移动位置。

案例:我有一个400x400的图片容器，但是我要显示的图片是400x1200的，所以我当时只能显示400的高度，但宽度是恒定的。

我想在用户单击按钮时显示部分图像。我画了一个例子来展示我想要的:http://0o2471.net/55070

在那个模型中，你有一个 400x400 的图像容器，用黑框标记，绿色背景是我想根据用户输入显示的“图像”。所以假设用户按下“Button bottom”然后底部会改变它的位置到中心(图像容器。)

关于我如何做到这一点有什么建议吗？我应该使用 jquery/javascript 中的哪些函数？ css Sprite 是最好的方法吗？我不需要完整的代码，只需要一些说明。

Answer 1

使用 background-position CSS 规则。用于此的 JQuery 代码

$(element).css({'background-position' : '0 -100px'})