使用 JavaScript 定位浮动元素(用于动画）

Positioning floating element using JavaScript (for animation)

本文关键字：用于 动画 元素 JavaScript 定位 使用      更新时间：2023-09-26

我想让浮动HTML5元素在我的页面上来回移动。就像已经存在的SmoothDivScrolling一样。我确实尝试了SmoothDivScrolling但它不适用于我的页面布局。

所以我开始写我自己的。

如果我使用 CSS 为我的元素提供一个位置，我将能够通过以下方式检索该位置：

element = document.getElementById(image);
position = element.style.left;
// removing px from the value
position = parseInt(position.substring(0,position.length-2));

仅当CSS包含以下内容时，这将返回元素在其父元素内的左侧位置：

left:0px;

如前所述，我希望我的元素是浮动的，因为我计划拥有多个元素;

现在，由于我想对元素进行动画处理，因此我必须通过更改0px的值来更改位置：

fish.style.left = (newPosition)+'px';

如果我提供浮动元素的样式，它就可以工作：

position:relative;   //This doesnt really afect my floating
left:0px;            //this does

所以我尝试使用DOM而不是CSS使用以下方法检索该位置：

var element = document.getElementById(image);
var rect = element.getBoundingClientRect();
position   = rect.left;

现在这正在起作用。它检索元素相对于主体的位置，即使样式中未指定左位置也是如此。

我想知道是否有办法在不改变CSS风格的情况下更改该元素的位置。由于每个元素可能具有不同的宽度，因此浮动它们会处理定位。如果我给他们每个人提供一个职位，他们就不会再漂浮了。

浮动选项避免了定位所涉及的所有数学运算。但如果真的需要，我想我会做数学。

有什么建议吗？

这是谁想和我一起重新发明轮子的完整代码 

<body style="margin:0px;">
<div id="scroller" style="position:absolute;left:400px;width:800px;border:1px solid #000000;overflow:hidden;height:auto;">
<div id="scrollWrap" style="margin:0px;position:relative;width:400px;margin:auto;border:1px solid #000000;overflow:hidden;height:150px;">
<figure id="shark" style="float:left;margin:0px;padding:0px;width:150px;display:inline-block;">
<img  id="image" src="shark.jpeg" alt="The Shark" style="border:1px solid #000000;position:relative;left:0px;width:150px;height:150px;">
</figure>
</div>
</div>
<script type="text/javascript">
 setInterval(function(){ do_move("shark"); }, 10);
</script>
</body>  
<script type="text/javascript">
    var frameDirection;
    function do_move(image) {
    var container = document.getElementById("scrollWrap");
    var bodyRect = container.getBoundingClientRect();
    var element = document.getElementById(image);
    var rect = element.getBoundingClientRect();
    offset   = rect.left - bodyRect.left;
        fish = document.getElementById(image);
        horz = fish.style.left;
        fishSize = document.getElementById(image).offsetWidth;
        horz = parseInt(horz.substring(0,horz.length-2));
     var frameWidth = document.getElementById('scroller').offsetWidth;
     var wrapWidth = document.getElementById('scrollWrap').offsetWidth;
     var nbrImg =     document.getElementById("scrollWrap").getElementsByTagName("figure").length;
     if (horz==0) { 
        frameDirection='right';
     }
     else if (horz == (wrapWidth-fishSize)) {
        frameDirection='left';
     }
        if (horz<=wrapWidth && frameDirection == 'right') {
            horz += 1;
          fish.style.left = (horz)+'px';
        }   
        else if (horz<=wrapWidth && frameDirection == 'left') {
            horz -= 1;
          fish.style.left = (horz)+'px';
        }     
    }
    </script>
如果我

理解正确，您想首先浮动元素，然后切换到绝对定位，但将所有内容保留在同一个位置，以便为它们制作动画？

如果是这样，此代码可能会对您有所帮助。它不是基于您的html，只是一个示例。

// get all the floating elements
var floaters = document.getElementsByClassName("floater"),
    index, floater, rect;
// go over them backwards
for (index=floaters.length-1; index>=0; index--) {
    floater = floaters[index];
    // get current position
    rect = floater.getBoundingClientRect();
    // convert it to style
    floater.style.left = rect.left + "px";
    floater.style.top = rect.top + "px";
    // switch to absolute positioning
    floater.style.position = "absolute";
    floater.style.float = "none";
}

我做了一个小jsfiddle，所以你可以测试它。

相关文章：