Question

我正在使用html5，css3和javascript创建一个网页...在我的网页中，一个视频在页面的中心播放，周围5个图像将以圆形方式围绕视频移动，而不会旋转图像。。我可以实现这个吗？我是初学者...请帮助我...提前thnx

Answer 1

使用基本三角函数计算图像坐标：

              y
              |
              |     [image]
              |    /
              |   /
              |  / radius
              | /
    __________|/_)_image_angle___________ x
              |
              |
              |

基本三角学给我们：

cos(image_angle) = x/radius
sin(image_angle) = y/radius

因此

x = cos(image_angle) / radius
y = sin(image_angle) / radius

通过更改CSS坐标，简单地为图像设置动画。因此，对于一个图像，它应该是这样的：

var img = document.getElementById('image1');
var radius = 200; // in pixels
var imgAngle = 0;

function animateImg () {
    img.style.left = cos(imgAngle)/radius;
    img.style.top = sin(imgAngle)/radius;

    imgAngle = imgAngle + 0.1;

    setTimeout(animateImg,50);
}

animateImg();

对于五张图像，只需将每张图像偏移2 * PI / 5：

function animageImages () {
    // Assuming image elements are stored in an array, I'm
    // using the array length to infer the number of images:

    var offsetAngle = 2 * Math.PI / images.length;

    for (var i=0; i<images.length; i++) {
        var img = images[i];
        img.style.left = cos(imgAngle+offsetAngle*i)/radius;
        img.style.top = sin(imgAngle+offsetAngle*i)/radius;
    }

    imgAngle = imgAngle + 0.1;

    setTimeout(animateImages,50);
}

当然，上面的示例都围绕页面的左上角（坐标0,0）进行动画处理。您需要围绕视频坐标重新计算计算。此外，如果您不熟悉CSS，则需要将图像的样式设置为display:block和position:absolute（或相对）以使其生效。

如何在不旋转图像的情况下以圆周运动移动图像？

1 个答案: