当前位置：文江博客话题详情

使用 JavaScript 循环移动 Div

发布于 2024-07-18 11:30:05 字数 71 浏览 3 评论 0原文

是否可以使用 JavaScript 循环旋转 Div。我的 HTML 页面中有四个 DIV。我需要循环旋转这些 DIV。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泪眸﹌ 2024-07-25 11:30:05

实际上并不难：

function moveDiv(t,mdiv) {
            t = t + 0.05; // "time"
            var r = 10, //radius of circle
                xcenter = 400, //x location of circles centre on screen
                ycenter = 400, //y location of circles centre on screen
                x = Math.floor(xcenter + (r * Math.cos(t))), //circles parametric function
                y = Math.floor(ycenter + (r * Math.sin(t))); //circles parametric function
            mDiv.style.top = x + "px"; //set divs new coordinates
            mDiv.style.left = y + "px"; //set divs new coordinates

            setTimeout(function() { //make sure the animation keeps going
                moveDiv(t,mdiv);
            }, 100);
}
    myDiv = //get div element
    moveDiv(1,myDiv); //start the animation

还没有测试过，但这就是它应该如何工作的。确保将这些 div 的 css“位置”属性设置为绝对或固定。另请查看圆的参数方程。

It's actually not hard:

function moveDiv(t,mdiv) {
            t = t + 0.05; // "time"
            var r = 10, //radius of circle
                xcenter = 400, //x location of circles centre on screen
                ycenter = 400, //y location of circles centre on screen
                x = Math.floor(xcenter + (r * Math.cos(t))), //circles parametric function
                y = Math.floor(ycenter + (r * Math.sin(t))); //circles parametric function
            mDiv.style.top = x + "px"; //set divs new coordinates
            mDiv.style.left = y + "px"; //set divs new coordinates

            setTimeout(function() { //make sure the animation keeps going
                moveDiv(t,mdiv);
            }, 100);
}
    myDiv = //get div element
    moveDiv(1,myDiv); //start the animation

Haven't tested, but that's about how it should work. Make sure you set css "position" property of those divs to absolute or fixed. Also take a look at parametric equation for circle.

回复收藏 0 原文