使用jquery在正方形中移动文本

moving text in a square using jquery

本文关键字：移动 文本 正方形 jquery 使用      更新时间：2024-05-06

我有一个文本，我想以正方形的方式移动它。我已经制作了以下jquery代码，但只能将其向右移动，然后向下移动。在那之后，一切都变得一团糟。我想不出正确的代码。帮我找到解决方案。

<!DOCTYPE html>
<html>
<head>
    <title>Text</title>
</head>
<body>
<h1>hello</h1>
<script src = "jquery-1.11.2.min.js"></script>
<script>
var leftoffset = 0;
var downoffset = 0;
var move = function()
{
$("h1").offset({left : leftoffset, top : downoffset});
leftoffset++;
if (leftoffset > 100)
    {
        leftoffset--;
        downoffset++;
        if ( downoffset > 100)
        {
            downoffset++;
            leftoffset--;
            if(leftoffset < 0)
            {
                downoffset--;
                if (downoffset < 0)
                {
                    leftoffset = 0;
                    downoffset = 0;
                }
            }
        }
    }
}
setInterval(move,30);
</script>
</body>
</html>

使用动画的解决方案怎么样

$("h1").animate({
    "left": "+=50px"
}, "slow")

小提琴http://jsfiddle.net/57kfmuur/

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
let x = 0;
let y = 0;
let b = 200;
let c = 200;
let heading = function (){
 
if (x < 200) {
$("h1").offset({
        left: x,
        top: 0
});
x++
} else if (y < 200) {
$("h1").offset({
        top: y,
        left:200
});
y++
} else if (b > 0) {
$("h1").offset({
        left: b,
        top: 200 
});
b--
} else if (c > 0) {
$("h1").offset({
        top: c,
        left: 0 
});
c--
} else {
 x = 0;
 y = 0;
 b = 200;
 c = 200;
 };
};
setInterval(heading, 10);
</script>
相关文章：