Fatal编程技术网
  • javascript/
  • 如何在IE以外的浏览器中旋转JavaScript中的image/div

如何在IE以外的浏览器中旋转JavaScript中的image/div

javascript image

如何在IE以外的浏览器中旋转JavaScript中的image/div,javascript,image,rotation,Javascript,Image,Rotation,我需要以用户指定的角度手动旋转图像 我使用以下代码，但它只适用于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'>

我需要以用户指定的角度手动旋转图像

我使用以下代码，但它只适用于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>


旋转（第2、45帧）；
功能旋转（元素，度）
{
如果（navigator.appName=='MicrosoftInternetExplorer'）
{
rad=deg*Math.PI/180；
elem.style.filter=“progid:DXImageTransform.Microsoft.Matrix（M11='1.0'，sizingmethod='auto expand'）”；
元素过滤器项（0）.M11=Math.cos（rad）；
元素过滤器项（0）.M12=-Math.sin（rad）；
元素过滤器项（0）.M21=数学sin（rad）；
元素过滤器项（0）.M22=数学cos（rad）；
elem.style.marginLeft=（（canvsize elem.offsetWidth）/2）+'px'
elem.style.marginTop=（（canvsize elem.offsetHeight）/2）+'px'
}
其他的
{
elem.style.MozTransform='旋转（'+deg+'）；
elem.style.webkitttransform='旋转（'+deg+'）；
elem.style.OTransform='旋转（'+deg+'）；
elem.style.MsTransform='rotate（'+deg+'）；
elem.style.transform='旋转（'+deg+'）；
}
}
您能帮忙吗？

在非IE浏览器中，这实际上更容易。MDN已经介绍了如何使用CSS3。还有一些

对于Webkit浏览器，应该有帮助。

您忘记将
deg
添加到css属性

您还应该向图像添加一个
变换原点
，使其围绕中心旋转（假设您正试图这样做）

这段代码应该可以做到这一点

<!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>


旋转（第2、45帧）；
功能旋转（元素，度）
{
如果（navigator.appName=='MicrosoftInternetExplorer'）
{
rad=deg*Math.PI/180；
elem.style.filter=“progid:DXImageTransform.Microsoft.Matrix（M11='1.0'，sizingmethod='auto expand'）”；
元素过滤器项（0）.M11=Math.cos（rad）；
元素过滤器项（0）.M12=-Math.sin（rad）；
元素过滤器项（0）.M21=数学sin（rad）；
元素过滤器项（0）.M22=数学cos（rad）；
elem.style.marginLeft=（（canvsize elem.offsetWidth）/2）+'px'
elem.style.marginTop=（（canvsize elem.offsetHeight）/2）+'px'
}
其他的
{
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='旋转（'+deg+'deg'）；
elem.style.WebKittTransform='旋转（'+deg+'deg'）；
elem.style.OTransform='旋转（'+deg+'deg'）；
elem.style.MsTransform='旋转（'+deg+'deg'）；
elem.style.transform='旋转（'+deg+'deg'）；
}
}
看一个CSS示例：

-webkit-transform: rotate(45deg);
如您所见，您忘记添加deg

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)';
没问题。顺便说一下，您可能需要考虑将一个字符串定义为变量，然后将每个属性设置为定义的字符串变量。这使得以后更改值变得更容易。仅供参考，浏览器检测是有害的。您的代码在IE10中无法工作，因为
navigator.appName
等于
“Microsoft Internet Explorer”
，但已删除对筛选器的支持。最好检查
*transform
属性是否存在于
elem.style
中，如果不存在，则使用过滤器回退。最简单的解释总是最好的