如何使用 javascript 使旋转图像跨浏览器工作
我正在使用 JavaScript 构建一个模拟时钟,我知道如果使用 jQuery 会容易得多,但这里不提供这种选择。
在 Chrome 和 Safari(即 webkit 浏览器)中一切正常,但在其他浏览器中则不然。
这是我的勾选方法,基本上它根据时间旋转图像。
function tick(deg, elmt){
document.getElementById(elmt).setAttribute(
"style", "transform:rotate(" + deg + "deg);"
+ "-moz-transform: (" + deg + "deg);"
+ "-o-transform: (" + deg + "deg);"
+ "-webkit-transform:rotate(" + deg + "deg);"
+ "filter:progid:DXImageTransform.Microsoft.BasicImage(" + deg + "deg);"
);
}
有什么建议让它发挥作用吗?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您尚未对
-moz-
和-o-
属性使用rotate
,即 IE 语法中的rotation
演示位于 http://jsfiddle.net/gaby/fjHHX/3/
更新 了
改变 代码以支持 IE9
-ms-
扩展并删除了filter
,该过滤器不允许任意旋转(仅 0、90、180、270 度 em>)..为了支持 IE 版本 8 及更低版本,您可以使用矩阵转换,但它会变得丑陋..请查看 http://css3please.com/
或者查看 http://www.boogdesign.com/examples/transforms 的来源/matrix-calculator.html 了解如何操作
You have not used
rotate
for the-moz-
and-o-
properties, therotation
in the IE syntaxDemo at http://jsfiddle.net/gaby/fjHHX/3/
Update
Altered the code to support the IE9
-ms-
extension and removed thefilter
one which does not allow for arbitrary rotations (only 0, 90, 180, 270 degrees)..For support of IE versions 8 and below you can use a matrix transformation but it gets ugly.. look at section
.box_rotate
at http://css3please.com/or look at the source of http://www.boogdesign.com/examples/transforms/matrix-calculator.html for how to do it