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

Question

I want to make floating HTML5 element move back and forward on my page. 我想让浮动HTML5元素在页面上前后移动。 Exactly like SmoothDivScrolling that is already out there. 就像已经存在的SmoothDivScrolling一样。 I did try SmoothDivScrolling and it is not working well with the layout of my page. 我确实尝试过SmoothDivScrolling ，但它与我的页面布局无法很好地配合。

So I have started to write my own. 所以我开始写自己的。

If I give a position to my element using CSS I will be able to retrieve the position with: 如果使用CSS为元素指定位置，则可以使用以下方法检索位置：

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

This will return the left position of the element inside its parent only if the CSS contain: 仅当CSS包含以下元素时，这才返回元素在其父元素内的左侧位置：

left:0px;

As mentioned, I want my elements to be floating because I plan to have many more than one element; 如前所述，我希望元素是浮动的，因为我计划有多个元素。

Now since I want to animate my element I have to change the position by changing the value of 0px with: 现在，由于我要为元素设置动画，因此必须通过更改0px的值来更改位置：

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

It is working if I provide the style of my floating element with: 如果我为浮动元素的样式提供以下信息，则它可以正常工作：

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

So I tried to retrieve the position with DOM instead of CSS using: 所以我尝试使用DOM而不是CSS来检索位置：

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

Now this is working. 现在这正在工作。 It retrieves the position of the element relative to the body even if no left positioning was specified in the style. 即使未在样式中指定左定位，它也会检索元素相对于实体的位置。

I am wondering if there is way to change the position of that element without going trough CSS style. 我想知道是否有办法在不影响CSS样式的情况下更改该元素的位置。 Because each element might have different width, floating them take care of the positioning. 由于每个元素的宽度可能不同，因此浮动它们会影响位置。 If I provide a position to each of them they won't be floating anymore. 如果我为他们每个人提供职位，他们将不再浮动。

The floating option avoid all the math involved on positioning. 浮动选项可避免所有涉及定位的数学运算。 But if it's really needed I guess I will do the math. 但是，如果真的需要，我想我会做数学。

Any suggestions? 有什么建议么？

Here is the full code for who ever wants to reinvent the wheel with me 这是谁想和我一起重塑车轮的完整代码

<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>

Answer 1

If I understand correctly, you want to initially float your elements, then switch to absolute positioning, but keep everything in the same place, so you can animate them? 如果我理解正确，那么您想首先浮动元素，然后切换到绝对位置，但是将所有内容都放在同一位置，以便可以对其进行动画处理？

If so, this code may help you. 如果是这样，此代码可能会对您有所帮助。 It's not based on your html, just an example. 它不是基于您的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";
}

I made a little jsfiddle , so you can test it. 我做了一点jsfiddle ，所以可以测试一下。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-01-29 20:35:36

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-01-29 20:35:36

解决方案1
1 已采纳 2015-01-29 20:35:36