Question

所以我在网站上制作这个小技巧，当你在屏幕上移动光标时，它会改变网站徽标旋转的速度。

由于某种原因，我似乎无法改变使用js动态旋转的元素的动画属性。我还添加了一个文本框来显示鼠标X位置，我用它来表示徽标的旋转速度，它正确地显示了字符串，所以我猜它可能是一个愚蠢的语法错误。

<style type="text/css">
#logorota {

    animation: 15s linear 0s normal none infinite rot_inf;    
}

@keyframes rot_inf {

    0% {    
        transform: rotate(0deg);        
    }

    100% {  
        transform: rotate(359deg);      
    }
}


</style>


<body>
<script>            
        document.captureEvents(Event.MOUSEMOVE);

        document.onmousemove = mousePos, logoSpeed;

            function mousePos (x) {

                var mouseX = x.pageX / 100;

                document.mouseMovs.mousePos.value = mouseX + "s linear 0s normal none infinite rot_inf"; //displays the string correctly.
            };


            function logoSpeed (x)
            {

                var mouseX = x.pageX / 100;
                document.getElementById('logorota').style.animation = mouseX + "s linear 0s normal none infinite rot_inf";

            };                
    </script>

    <div>
        <img src="logorota.png" id="logorota">

        <form name="mouseMovs">
        <input type="text" name="mousePos" /> Mouse position <br />     
        </form>
</div>
</body>

编辑：已添加http://jsfiddle.net/ot4zyp30/

Answer 1

我在这里有一个针对webkit的解决方案，正常工作。在运行中改变这些值是一件非常棘手的事。

附加到＆＃39; mousemove＆＃39;，此脚本添加/删除动画规则＆amp;等级并改变一些值，使其旋转得足够平滑。

如果你使用这个，那么你想改变一堆东西。 Atleast确保样式表索引是好的等等。在这种情况下我使用1，因为那是jsFiddle样式表索引。

编辑：现在也适用于firefox

http://jsfiddle.net/9nj4dgeq/

//

document.addEventListener('mousemove', function(event) {

    Rotator.init(event, document.getElementsByClassName("img")[0]);

}, false);

//

var Rotator = {

    init: function(event, element_) {



        var element = element_,
            compatibility = {
                prefixes: ["-webkit-", "-moz-"],
            },
            browserPrefix,
            browserEvent = event.clientX,
            stylesheet = 0;

        for (var k in compatibility) {

            if (k === "prefixes") {

                for (var i = 0; i < compatibility[k].length; i += 1) {

                    if (window.getComputedStyle(element, null).getPropertyValue(compatibility[k][i] + "transform") !== null) {

                        browserPrefix = compatibility.prefixes[i];
                    }
                }
            }
        }

        this.rotate(element, browserPrefix, browserEvent, stylesheet);
    },

    rotate: function(element_, browserPrefix_, browserEvent_, stylesheet_) {

        var element = element_,
            className = element.className,
            browserPrefix = browserPrefix_,
            browserEvent = browserEvent_,
            stylesheet = stylesheet_,
            blanks = [
                "@" + browserPrefix + "keyframes ",
                " {from{" + browserPrefix + "transform:rotate( ",
                "deg);}to{" + browserPrefix + "transform:rotate(",
                "deg);}}",
                ".",
                "{" + browserPrefix + "animation-name:",
                ";" + browserPrefix + "animation-timing-function:linear;" + browserPrefix + "animation-iteration-count:infinite;" + browserPrefix + "animation-duration:",
                "s}"],
            name = "rotating" + browserEvent,
            speed = String(browserEvent / 100),
            transform = window.getComputedStyle(element, null).getPropertyValue(browserPrefix + "transform"),
            values, a, b, angle, toAngle;

        if (transform !== "none") {

            values = transform.split('(')[1];
            values = values.split(')')[0];
            values = values.split(',');
            a = values[0];
            b = values[1];

            angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
        }

        toAngle = 360 + angle;

        document.styleSheets[stylesheet].insertRule(blanks[0] + name + blanks[1] + angle + blanks[2] +

        (function () {

            if (!toAngle) {

                return 10;

            } else {

                return toAngle;
            }
        }()) + blanks[3], 0);

        document.styleSheets[stylesheet].insertRule(blanks[4] + className + blanks[5] + name + blanks[6] + speed + blanks[7], 0);

        if (document.styleSheets[stylesheet].cssRules.length > 8) {
            for (var rules = document.styleSheets[stylesheet].cssRules.length; rules > 2; rules -= 1) {
                document.styleSheets[stylesheet].deleteRule([rules] - 1);
            }
        }
    }
}

用javascript onmousemove更改动画css属性？

1 个答案: