2

私は長さが可変であるリストを持っています、それは4つのアイテムまたは30のアイテムを持つことができます。

問題は、このリストが機能しているJavascriptを介してマーキーとしてレンダリングされているが、アイテムが画面幅に達してから次の行に渡されることです。

すべてのアイテムを同じ行に配置したいので、リストを移動してマーキー効果を再現できます。

私が持っているものと欲しいもの

<div class="submenu-container">
<div id="agrupador">
 <ul style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;" class="submenu" id="moverlo">
       <li> Item </li>
       <li> Item </li>
       <li> Item </li>
       <li> Item </li>
       <li> Item </li>
       <li> Item </li>
     </ul>
    </div>
</div>

    .submenu-container {
    background:#F0F7FF;
    border-bottom:1px silver solid;
    width: 100%; 
    overflow: hidden;
}

.submenu li {
    display: inline-block;
    margin-left:4px;
    background:none;
    *display: inline; /* IE */
    float:left;
}

.submenu {
    margin:0;
    padding-top:8px;
    padding-bottom:8px;
    padding-left:0;
    padding-right:0;
    clear:none;
    width:auto;
    float:left;
}

そしてjavascriptで：

function ClonarAvisos(){
var width = alertSize(); // Usable window width
var xVarScreen = width - $('moverlo').getWidth();
alert($('moverlo').getWidth());
$('moverlo').setStyle({ width: $('moverlo').getWidth() + xVarScreen });
$('agrupador').setStyle({ width: $('moverlo').getWidth() * 2 });
var clon = Element.clone('moverlo', true);
clon.id = 'moverlo2';
$('agrupador').insert(clon);

}

function MoveNoticias(p) {
//Función que imita el comportamiento del Tag "marquee"
new Effect.Move('agrupador', {
    x: -3,
    y: 0,
    mode: 'relative',
    duration: 0.1,
    afterFinish: function() {
        var offSetDistance = $('agrupador').offsetLeft ;
        offSetDistance = Math.abs(offSetDistance);
        var gettingWidth = $('moverlo').getWidth() ; 
        if ( offSetDistance >= gettingWidth ) {
            Element.setStyle('agrupador', {left: '0px' });
        }
        MoveNoticias();
    }
});
}

私がやろうとしていることをご理解いただければ幸いです。ありがとう！

4

1 に答える 1

6

float: leftから を削除し、「ul」にli追加してみてください。white-space: nowrap

ここで試してみました：http://jsfiddle.net/76d6p/

于 2012-07-24T13:33:37.410 に答える