logo标签列表

如何在除IE之外的浏览器中使用JavaScript旋转图像/ DIV

javascriptimagerotation
4

我需要根据用户指定的角度动态旋转一张图片。

我使用下面的代码，但它只适用于IE浏览器，对于其他浏览器无效。

<div id="frame1" style="overflow:hidden" width='300' height='300'>
    <div id="frame2" width='200' height='200'>
        <img src='1.jpeg'' id='im' src='1.jpeg' width='10' height='10'>
    </div>
</div>

<script type="text/javascript">

rotate(frame2, 45);

function rotate (elem, deg)
{
    if (navigator.appName=='Microsoft Internet Explorer')
    {
        rad = deg*Math.PI/180;

        elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";

        elem.filters.item(0).M11 = Math.cos(rad);
        elem.filters.item(0).M12 = -Math.sin(rad);
        elem.filters.item(0).M21 = Math.sin(rad);
        elem.filters.item(0).M22 = Math.cos(rad);
        elem.style.marginLeft=((canvsize-elem.offsetWidth)/2)+'px'
        elem.style.marginTop=((canvsize-elem.offsetHeight)/2)+'px'
    }
    else
    {
        elem.style.MozTransform    = 'rotate(' + deg + ')';
        elem.style.WebkitTransform = 'rotate(' + deg + ')';
        elem.style.OTransform      = 'rotate(' + deg + ')';
        elem.style.MsTransform     = 'rotate(' + deg + ')';
        elem.style.transform       = 'rotate(' + deg + ')';
    }
}

</script>

你能帮忙吗？

这是需要翻译的内容。
仅供参考，浏览器检测是不好的。您的代码在IE10中将无法正常工作，因为navigator.appName等于“Microsoft Internet Explorer”，但支持滤镜已被删除。最好检查elem.style中是否存在某些*transform属性，仅在不存在时使用过滤器回退。 - duri
3个回答
7

看一个CSS示例：

-webkit-transform: rotate(45deg);

如您所见，您忘记添加度

elem.style.mozTransform    = 'rotate(' + deg + 'deg)';
elem.style.webkitTransform = 'rotate(' + deg + 'deg)';
elem.style.oTransform      = 'rotate(' + deg + 'deg)';
elem.style.msTransform     = 'rotate(' + deg + 'deg)';
elem.style.transform       = 'rotate(' + deg + 'deg)';
最简单的解释总是最好的。 - wubbewubbewubbe
0

在非IE浏览器中实际上更容易。MDN有关于如何使用CSS3的良好文档。这里也有一些资料。

对于Webkit浏览器，这个页面应该会有所帮助。

0
你忘记在 CSS 属性中添加 `deg` 了。
你还应该在图片上添加 `transform origin`，以使其围绕中心旋转（假设这是你想要做的）。
这段代码可以实现这个效果。
<!DOCTYPE html>
<html>
<head>
<title></title>

<style>
</style>

</head>
<body>

<div id="frame1" style="overflow:hidden" width='300' height='300'>
    <div id="frame2" width='200' height='200'>
        <img src='1.jpeg' id='im' src='1.jpeg' width='10' height='10'>
    </div>
</div>

<script type="text/javascript">

rotate(frame2, 45);

function rotate (elem, deg)
{
    if (navigator.appName=='Microsoft Internet Explorer')
    {
        rad = deg*Math.PI/180;

        elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";

        elem.filters.item(0).M11 = Math.cos(rad);
        elem.filters.item(0).M12 = -Math.sin(rad);
        elem.filters.item(0).M21 = Math.sin(rad);
        elem.filters.item(0).M22 = Math.cos(rad);
        elem.style.marginLeft=((canvsize-elem.offsetWidth)/2)+'px'
        elem.style.marginTop=((canvsize-elem.offsetHeight)/2)+'px'
    }
    else
    {

        elem.style.MozTransformOrigin = "5px 5px";
        elem.style.WebkitTransformOrigin = "5px 5px";
        elem.style.OTransformOrigin = "5px 5px";
        elem.style.MsTransformOrigin = "5px 5px";
        elem.style.transformOrigin = "5px 5px";

        elem.style.MozTransform    = 'rotate(' + deg + 'deg)';
        elem.style.WebkitTransform = 'rotate(' + deg + 'deg)';
        elem.style.OTransform      = 'rotate(' + deg + 'deg)';
        elem.style.MsTransform     = 'rotate(' + deg + 'deg)';
        elem.style.transform       = 'rotate(' + deg + 'deg)';
    }
}

</script>

</body>
</html>
没问题。顺便说一下，你可能想考虑将一个字符串定义为一个变量，然后将每个属性设置为已定义的字符串变量。这样可以更轻松地在未来更改值。 - Jeffrey Sweeney
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接