是否有关于如何剪切或剪切大图像的文档/教程,以便用户只能看到该图像的一小部分?假设源图像是10帧动画,端对端堆叠,因此它非常宽.我怎么能用Javascript一次只显示1个任意帧的动画?
我已经研究过这种"CSS Spriting"技术,但我认为我不能在这里使用它.源图像是从服务器动态生成的; 在从服务器返回之前,我不知道每个帧的总长度或大小.我希望我可以这样做:
var image = getElementByID('some-id'); image.src = pathToReallyLongImage; // Any way to do this?! image.width = cellWidth; image.offset = cellWidth * imageNumber;
Ben Blank.. 25
这可以通过将图像封闭在"视口"div中来完成.在div上设置宽度和高度(根据您的需要),然后设置position: relative
并overflow: hidden
在其上.绝对将图像放在其中并更改位置以更改显示的部分.
要显示从(10,20)开始的图像的30x40部分:
常见的CSS属性与类相关联,因此您可以在页面上拥有多个视口/剪切图像.setViewport(…)
可以随时调用该函数来更改图像的哪个部分显示.
这可以通过将图像封闭在"视口"div中来完成.在div上设置宽度和高度(根据您的需要),然后设置position: relative
并overflow: hidden
在其上.绝对将图像放在其中并更改位置以更改显示的部分.
要显示从(10,20)开始的图像的30x40部分:
常见的CSS属性与类相关联,因此您可以在页面上拥有多个视口/剪切图像.setViewport(…)
可以随时调用该函数来更改图像的哪个部分显示.