Question

我有一个div，里面放了许多语言的图像。 div的总大小超过了浏览器中的页面大小。所以我希望图像像动画滑块一样从下到上保持移动。图像大小不是我想要改变的。我只是希望图像从下到上保持不变。在本网站的最后http://www.veepal.com/，有一个div，其中包含不同编程语言的图像，这些图像不断滑动。我想要类似的功能。可能吗？？

 <div id="languagesRow" style="position: absolute;top:5px;">
              <div id="l1"><img class="messagesOne"  src="images/languages/English.png"></div>
              <div id="l2"><img class="messagesOne"  src="images/languages/French.png"></div>
              <div id="l3"><img class="messagesOne"  src="images/languages/Russian.png"></div>
              <div id="l4"><img class="messagesOne"  src="images/languages/Chinese.png"></div>
              <div id="l5"><img class="messagesOne"  src="images/languages/Korean.png"></div>
              <div id="l6"><img class="messagesOne"  src="images/languages/Hindi.png"></div>


          </div>

我不知道可以更优化地使用什么来实现这种动画，所以我在这篇文章中标记了jquery，javascript和css。

Answer 1

CSS Marquee是一个选项：http://jsfiddle.net/FbKW9/

<marquee  behavior="scroll" direction="up" >//item</marquee>

Answer 2

嗯，你可以使用选框：

<强> http://jsfiddle.net/ZB2Fc/

<div class='flags'>
    <MARQUEE BEHAVIOR='SCROLL' HEIGHT='25' WIDTH='300' BGColor='yellow' scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">
        <div id="l1">English</div>
        <div id="l2">French </div>
        <div id="l3">Russian </div>
        <div id="l4">Chinese </div>
    </MARQUEE>
</div>

创建一个包含滑动图像的div

2 个答案: