javascript - 显示图像的一部分

Question

如何使用 jQuery 或其他 JavaScript 技术显示图像的一部分？

例子:

image:
[                ]
[     --------   ]
[     -      -   ]
[     - part -   ]
[     -      -   ]
[     --------   ]
[                ]

Answer 1

操纵 CSS 属性 background，如 this :

#imgDiv {
    background-image: url(image.jpg);
    background-position: 10px 50px; /* Visible coordinates in image */
    height: 200px; /* Visible height */
    width: 200px; /* Visible width */
}

下面是如何.animate 可见部分:http://jsfiddle.net/wGpk9/2/