Fatal编程技术网

使用javascript进行旋转

javascript html

使用javascript进行旋转,javascript,html,Javascript,Html,我想旋转一个div。经过大量研究，没有javascript可以在不使用css转换的情况下旋转一个div，除非使用jquery库。问题是我想做一个小的旋转，添加库对我来说不是一个选择 使用javascript本身，分、时、秒轮换 有人能帮我在IE7和更高版本上使用javascript本身而不使用任何附加库吗？在没有javascript和jQuery的情况下使用原始CSS是可能的： $('#idElement').css({ /*modern browsers*/ '-moz-tr

我想旋转一个div。经过大量研究，没有javascript可以在不使用css转换的情况下旋转一个div，除非使用jquery库。问题是我想做一个小的旋转，添加库对我来说不是一个选择

使用javascript本身，分、时、秒轮换

有人能帮我在IE7和更高版本上使用javascript本身而不使用任何附加库吗？

在没有javascript和jQuery的情况下使用原始CSS是可能的：

$('#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)");
我不明白为什么不使用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>






var=0；
函数rotate（）{
如果（计数==0）{
document.images[“img1”].src=“myimage2.jpg”；
理货=1；
返回true；
}
否则{
document.images[“img1”].src=“myimage1.jpg”；
理货=0；
返回true；
}
}
虽然有点晚了，但我已经编写了一些代码来实现这一点

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

没有任何东西在时钟上旋转，而且它不仅仅使用JavaScript。每个点都有一个单独的div，JS访问DOM来移动组成被移动手的每个div。（提示：IE上的CSS3）@Fred我敢让你用css3pie旋转ie8中的某个东西或更低@哈哈，我没意识到DYou可能会发现有用的…Dzoki是网站的目标，大多数用户都使用GPRS，这提供了非常缓慢的连接。我的站点总体上是50kb，在客户端，我不想使用jQuery，因为（缩小的，甚至）库是35KB。由于只需要一次旋转，添加jquery似乎不太好。上面的javascript翻转div中的图像，而不是旋转它。据我所知，我必须使用数学库来改变div的绝对位置，我必须旋转。你可以使用在线库，不是吗？我对它不熟悉。如果您当时没有得到更好的答案，我将尝试找到另一个解决方案。谢谢，我将对此进行研究：）现在您只需要添加IE过滤器支持3:D 
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);
}