Question

我正在制作一些代码，以便在网页上的光标周围加一个圆圈，但我无法获得＆＃39; div＆＃39;遵循我想要的道路;事实上，该对象根本没有移动，我无法弄清楚为什么我的代码不起作用。这段代码给我带来了麻烦，因为我已经缩小了范围：

<!DOCTYPE HTML>
<head>
<title>TEST SPACE</title>
<script src="jquery-1.10.2.min.js"></script>
</head>

<body>
<div id="test"></div>
<style>
#test {
    background-color: black;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
}
</style>
<script>
const omega = Math.PI / 2000;

function dotRotation() {
    var time = 0;

    var x = 20*(Math.sin(omega*time));
    var y = 20*(Math.cos(omega*time));

    document.getElementById("test").style.marginLeft = x;
    document.getElementById("test").style.marginTop = y;

    time += 25;
};

$(document).ready(function() {
    setInterval('dotRotation()',25);
});
</script>
</body>

JSFiddle

Answer 1

有两件事是错的

您需要将time变量移出函数
您需要为传递到边距的值提供单位，因此在变量+'px'

.marginTop = y + 'px';

所以完全

const omega = Math.PI / 2000;
var time = 0;

function dotRotation() {
    var x = 20*(Math.sin(omega*time));
    var y = 20*(Math.cos(omega*time));
    var style = document.getElementById("test").style;

    style.marginLeft = x +'px';
    style.marginTop = y +'px';

    time += 25;
};

http://jsfiddle.net/mWC63/

此外，您可以缓存对dom的引用以避免搜索

Answer 2

你的小提琴设置为运行onload，它应设置为在头部运行。 [在jQuery选择下左下方。]

time在函数内部声明，因此每次调用它时都会重置为零。将其移至dotRotation

之外

var time = 0;
function dotRotation() {

    var x = 20*(Math.sin(omega*time));
    var y = 20*(Math.cos(omega*time));

    $("#test").css({"marginLeft" : x + "px", "marginTop" : y + "px"});

   time += 25;
};
$(function() {
    setInterval(dotRotation,25);
});

让'div'围成一圈

2 个答案: