使用javascript旋转

我想旋转一个div。经过大量研究，除非使用jQuery库，否则没有JavaScript可以在不使用css转换的情况下旋转div。问题是我想做一个小的旋转，并添加库不是我的选择.Css变换不适用于IE。使用javascript旋转

With this example clock分钟，小时和秒钟使用javascript本身旋转。

任何人都可以帮助我得到一个div在IE7上旋转，以上使用JavaScript本身没有任何额外的库？

来源

2011-08-05 slovaiwi

该时钟没有旋转，它不仅仅使用JavaScript。每个点都有一个单独的div，并且JS访问DOM以移动构成正被移动的手的每个div。 – Quentin

mmmm http://css3pie.com/ tastes goooooood。（提示：IE上的CSS3） – Fred

@Fred我敢于在ie8中旋转某些东西，并使用css3pie降低它。 http://css3pie.com/documentation/supported-css3-features/ – Joonas

有可能使用原始CSS没有的JavaScript和jQuery做：

$('#idElement').css({ 
    /*modern browsers*/ 
    '-moz-transform':'rotate(88deg)', 
    '-webkit-transform':'rotate(88deg)', 
    '-o-transform':'rotate(88deg)', 
    '-ms-transform':'rotate(88deg)' 
    /*IE:*/ 
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476), /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */ 
});

您可以最肯定更改使用简单的JavaScript，如元素的属性：

document.getElementById("idElement").setAttribute("-moz-transform", "rotate(88deg)");

来源

2011-08-05 07:08:31 ThatGuy

谢谢，将看看这个:) – slovaiwi

我不明白为什么当它的很多更简单的解决方案时不使用jQuery？

这里是快速剧本我写

$(document).ready(function(){ 
    $('#element').easyRotate({ 
     degrees: 45 
    }); 
});

为JavaScript，你需要让你的DIV的照片，比旋转DIV中那些照片。我做了一个简单的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 

<html> 
<head> 
    <title></title> 
</head> 

<body> 
    <div id="div1"> 
     <img name="img1" src="myimage1.jpg" id="img1"> 
     <br> 
     <br> 
     <input type="button" value="Rotate this image" onclick="rotate()"> 
    </div><script type="text/javascript"> 
var tally = 0; 
    function rotate() { 
    if (tally == 0) { 
    document.images["img1"].src= "myimage2.jpg"; 
    tally = 1; 
    return true; 
    } 
    else { 
    document.images["img1"].src= "myimage1.jpg"; 
    tally = 0; 
    return true; 
    } 
    } 
    </script> 
</body> 
</html>

来源

2011-08-05 07:09:09 Dzoki

Dzoki，网站的目标，大多数用户都有GPRS，它提供非常缓慢的连接。我的网站整体上是50kb，在客户端，我不想使用jQuery，因为（缩小，偶数）库是35 kb。因为只需要一次循环，添加jquery看起来不太好。 – slovaiwi

上面的JavaScript在div中翻转图像而不是旋转它。据我所知，我将不得不使用数学库来改变绝对位置的div我必须旋转 – slovaiwi

你可以使用在线图书馆不能吗？我不熟悉它。如果你当时没有得到更好的答案，那么我会尝试为它找到另一个解决方案。 – Dzoki

这是有点晚，但我写了一些代码来做到这一点。

http://jsfiddle.net/rlemon/73DzT/

Object.prototype.rotate = function(d) { 
    var s = "rotate(" + d + "deg)"; 
    if (this.style) { // regular DOM Object 
     this.style.MozTransform = s 
     this.style.WebkitTransform = s; 
     this.style.OTransform = s; 
     this.style.transform = s; 
    } else if (this.css) { // JQuery Object 
     this.css("-moz-transform", s); 
     this.css("-webkit-transform", s); 
     this.css("-o-transform", s); 
     this.css("transform", s); 
    } 
    this.setAttribute("rotation", d); 
}

可以与常规的对象或与对象的JQuery使用。并存储一个名为“旋转”的属性，为您提供当前的旋转值。你可以玩这个，看看你能想出什么。

来源

2011-09-12 18:46:34 rlemon

干得好工作。感谢你的分享！ –

现在你只需要添加IE筛选器支持3：D –

使用javascript旋转

回答

相关问题