所以我在我的网站上做了这个小技巧，当你在屏幕上移动光标时，它会改变网站 Logo 的旋转速度。
出于某种原因，我似乎无法使用 js 更改即时旋转元素的动画属性。我还添加了一个文本框来显示我用于 Logo 旋转速度的鼠标 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>
最佳答案
我这里有一个 webkit 的解决方案，可以正常工作。动态更改这些值有点棘手。
附加到“mousemove”，此脚本连续添加/删除动画规则和类并更改一些值以使其足够平滑地旋转。
如果你使用它，你会想改变很多东西。至少确保样式表索引是好的等等。在这种情况下，我使用 1，因为那是 jsFiddle 样式表索引。
编辑:现在也适用于 firefox
//
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 - 使用 javascript onmousemove 更改动画 css 属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25231660/