Bullet Point 不动，只有图像

Question

I need to animate the points in a bullet list, the bullet list is a div that contains bullet points that are divs.我需要为项目符号列表中的点设置动画，项目符号列表是一个包含作为 div 的项目符号点的 div。

A bullet point div contains an image and another div which has the bullet point text, the problem is when I try and move a given bullet point div only the image is moved.一个项目符号 div 包含一个图像和另一个具有项目符号文本的 div，问题是当我尝试移动给定的项目符号 div 时，只有图像被移动。

I have tried various changes to the .style.position to no avail.我尝试了对 .style.position 的各种更改都无济于事。 I could not create an account on jsfiddle.net so the following is a working example that moves only the first bullet point:我无法在 jsfiddle.net 上创建帐户，因此以下是一个仅移动第一个要点的工作示例：

<html>
<head>
<title>Build Bullets</title>
<body>
<script>
window.setTimeout('initBuildBullets()',100);
function initBuildBullets(){
    var bulletPointsDiv = document.createElement('div');
    var bName = 'BulletList';
    bulletPointsDiv.style.visibility='visible';
    bulletPointsDiv.style.position = 'fixed';
    bulletPointsDiv.style.display = 'block';
    bulletPointsDiv.style.textAlign = 'left';
    bulletPointsDiv.id = bName;
    document.body.appendChild(bulletPointsDiv);
    var bullet_src = 'bullet_level_1.gif';
    var bulletText=[];
    bulletText[0]='Bullet Point 1';
    bulletText[1]='Bullet Point 2';
    bulletText[2]='Bullet Point 3';
    var x=100;
    var y=100;
    var h=100;
    var w=200;
    var lastBot = 0;
    var indent = 0;
    var imgW = 25;
    var hOffset = 5;
    for(var i=0;i<bulletText.length;i++){
        var bp_id =  bName + '_Bullet_Point_' + i;
        var bulletPointDiv = document.createElement('div');
        bulletPointDiv.id = bp_id;
        bulletPointDiv.style.overflow = 'hidden';
        bulletPointDiv.style.visibility='visible';
        bulletPointDiv.style.position = 'inherit';
        bulletPointDiv.style.display = 'inherit';
        bulletPointDiv.style.textAlign = 'left';
        bulletPointDiv.style.top = (y + lastBot) + 'px';
        bulletPointDiv.style.left = (x + indent) + 'px';
        var bulletImage = document.createElement('img');
        bulletImage.src = bullet_src;
        bulletImage.id = bName + '_Bullet_Image_' + i;
        var bulletFieldDiv = document.createElement('div');
        bulletFieldDiv.id = bName + '_Bullet_Field_' + i;
        bulletFieldDiv.style.overflow = 'hidden';
        bulletFieldDiv.style.position = 'inherit';
        bulletFieldDiv.style.display = 'inherit';
        bulletFieldDiv.style.textAlign = 'left';
        bulletFieldDiv.style.top = (y + lastBot) + 'px';
        bulletFieldDiv.style.left = (x + imgW + indent) + 'px';
        bulletFieldDiv.style.width = (w - (imgW + indent)) + 'px';
        bulletFieldDiv.innerHTML = bulletText[i];
        bulletFieldDiv.style.visibility='visible';
        bulletPointDiv.appendChild(bulletImage);
        bulletPointDiv.appendChild(bulletFieldDiv);
        bulletPointsDiv.appendChild(bulletPointDiv);
        lastBot += bulletFieldDiv.offsetHeight + hOffset;
    }
    window.setTimeout('moveBullets()',100);
}
function moveBullets(){
    var bp_id =  'BulletList_Bullet_Point_0';
    bulletPointDiv = document.getElementById(bp_id);
    bulletPointDiv.style.top = '0px';
    bulletPointDiv.style.left = '0px';
}
</script>
</body>
</html>

If I could ask that you copy/paste to test.如果我可以要求您复制/粘贴以进行测试。 The following image is the bullet_level_1.gif下图是bullet_level_1.gif

Answer 1

I need to set the style.position to 'relative' and then the top and left needs to account for the image (ONLY), once I do that then all objects within the div will move with the div, eg:我需要将 style.position 设置为“相对”，然后顶部和左侧需要考虑图像（仅），一旦我这样做，那么 div 中的所有对象都将与 div 一起移动，例如：

...
var bulletImage = document.createElement('img');
bulletImage.src = bullet_src;
var imgW = bulletImage.width + 8;
var bulletFieldDiv = document.createElement('div');
bulletFieldDiv.style.position = 'relative';
bulletFieldDiv.style.top = '-' + (bulletImage.height + 8) + 'px';
bulletFieldDiv.style.left = imgW + 'px';
...

That said, I'm not sure why I need the additional 8px for both the height and width??也就是说，我不确定为什么我需要额外的 8px 的高度和宽度？

Bullet Point 不动，只有图像

问题描述

1 个解决方案

解决方案1
0 2015-10-24 03:37:46

Bullet Point 不动，只有图像

问题描述

1 个解决方案

解决方案1 0 2015-10-24 03:37:46

解决方案1
0 2015-10-24 03:37:46