使用 JavaScript 循环旋转的 Div答案

【问题标题】：Div moving in cycle rotation using JavaScript使用 JavaScript 循环旋转的 Div
【发布时间】：2009-05-09 05:53:46
【问题描述】：

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

【问题讨论】：

请将您的问题格式化为普通文本；看来您已将其格式化为代码块（不是！）。

标签： javascript html css dhtml

【解决方案1】：

其实并不难：

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“位置”属性设置为绝对或固定。也可以看看parametric equation 的圈子。

【讨论】：

【解决方案2】：

您也许可以使用Raphaël JavaScript 库来完成类似的事情。

史蒂夫

【讨论】：

这是一个很棒的库，唯一的缺点是它不能跨浏览器，因为大多数浏览器都推迟了 SVG 的实现。目前所有主要的浏览器版本都支持 SVG。
您可能可以在 IE 中测试 SVG 支持并向他们展示他们需要在哪里下载使您的网站正常工作的 adobe 插件。

【解决方案3】：

不确定我是否理解这个问题，但请查看“循环”jQuery 插件：http://www.malsup.com/jquery/cycle/

【讨论】：

【解决方案4】：

这可以做到……但并不容易，而且您将无法保持 div 内内容的原始感觉。

除非我误解了你的问题，如果你只是在谈论通过 4 个 div 循环......这绝对是可能的，而且非常容易。但是如果你问你是否可以旋转实际的 div...

【讨论】：

Ravi，请花一点时间更清楚、更详细地写下您的问题。您在这里的评论并没有真正回答乍得的问题。是要依次显示四个 DIV 中的每一个，还是要旋转一个 DIV 的内容，还是其他？
嗨，保罗，这是链接 avineon.com。打开此链接，请参阅顶部。我需要使用 javascript 以相同的方式旋转四个图像。