jquery旋转重置大小和位置?
我正在使用 jquery 旋转插件。
当我在具有特定宽度和高度的 img
元素上调用它时(这不是源图像的实际宽度和高度。)但是,旋转应用准确它重置宽度和高度以匹配源图像。此外,如果图像已定位,它会删除其定位并将其设置为内联。
有办法防止这种情况吗?
I am using the jquery rotate plugin.
When I call it on an img
element that has a specific width and height (that is not the actual width and height of the source image.) The rotation is applied accurately however it resets the width and height to match the source image. Also if the image is positioned, it removes its positioning and sets it inline.
Is there a way to prevent this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这不起作用的原因是该插件从源图像创建一个新图像,但未能考虑其当前的宽度和高度。请注意,它实际上已经在 Internet Explorer 中正常工作,因为它使用某种 Microsoft 独有的矩阵变换机制来旋转原始图像。如果您查看第 27 行及其后的内容,其中应用了“良好的浏览器逻辑”:
现在,如果您在此处包含宽度和高度,它也适用于 Firefox:
The reason this doesn't work is that the plugin creates a new image from the source image but fails to take its current width and height into account. Note that it actually already works correctly in Internet Explorer, because it rotates the original image with some Microsoft-only matrix transform mechanism. If you look at line 27 and following, where the "good browser logic" is applied:
Now if you include the width and height here it works in Firefox as well:
jQuery 旋转插件使用图像的大小而不是 HTML 对象的大小。
您需要首先获取对象的大小,然后在插件开头设置您希望使用的宽度和高度:
一旦设置了变量,只要在图像中重新绘制图像,就可以使用它们插件。
将创建一个新的 img 元素,并在其上绘制您的图像。不要使用图像的大小,而是使用变量的大小(请参阅我在代码中的注释)
至于定位,您是否使用内联样式定位它?如果是这样,当从头开始创建 HTML 元素时,您显然会丢失它。不过,您不应该因为 css 类而丢失它(如果需要,请在 jQuery 插件中添加您的类)。
您可能应该将大小作为此插入的选项,而不是使用硬编码选择器。重用会更简单:
The jQuery rotate plugin uses the size of the image instead of the size of the HTML object.
You need to get the size of your object first, and then set the width and height that you wish to use with something like this at the beginning of the plugin :
Once you have your variables set, use them whenever the image is redrawn in the plugin.
A new img element is created and your image will be drawn on it. Instead of using the size of the image, use the size from the variables (see my comment in the code)
As for the positioning, do you position it with an inline style? If so, you will obviously lose it when the HTML element is created from scratch. You shouldn't lose it with a css class though (add your class in the jQuery plugin if needed).
You should probably make the size an option of this pluging instead of using a hardcoded selector. It will be much simpler to reuse :