Bullet Point 不動，只有圖像

Question

我需要為項目符號列表中的點設置動畫，項目符號列表是一個包含作為 div 的項目符號點的 div。

一個項目符號 div 包含一個圖像和另一個具有項目符號文本的 div，問題是當我嘗試移動給定的項目符號 div 時，只有圖像被移動。

我嘗試了對 .style.position 的各種更改都無濟於事。 我無法在 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>

如果我可以要求您復制/粘貼以進行測試。 下圖是bullet_level_1.gif

Answer 1

我需要將 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';
...

也就是說，我不確定為什么我需要額外的 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