Question

<marquee direction="up" behavior="scroll" scrollamount="3" onmouseover="this.scrollAmount=1" onmouseout="this.scrollAmount=3" style="height:295px;margin-top:10px;">
   <ul class="menu">
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;(DASA) 2014-15 <img class="new-tag" src="assets/img/new.gif"/></a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Advertisement for admission to  SC seats 2014</a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Notification - SC/ST & Minority Cell</a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Information About SC-ST Scholarship</a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Project Vacancy: (JRF) <img class="new-tag" src="assets/img/new.gif"/> </a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;PG Admission (January Session) 2015</a></li>
   </ul><!-- /.menu -->
</marquee>

我希望显示3组中的元素，即前3个元素应该向上滑动，在屏幕上保持3秒然后向上滑动。然后通过向上滑动可以看到接下来的3个元素。我如何实现这种效果？

Answer 1

不要使用选框，所有浏览器都不支持并计划删除。资料来源：https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee

您需要使用JavaScript或CSS 3动画。使用CSS3动画的示例：http://codepen.io/anon/pen/jWezPm

    /* The animation code */
@keyframes example {
    0%   {margin-top: 0; height: 90px;}
    20%  {margin-top: 0; height: 90px;}
    25%  {margin-top: -90px; height: 180px;}
    45%  {margin-top: -90px; height: 180px;}
    50%  {margin-top: -180px; height: 270px;}
    70%  {margin-top: -180px; height: 270px;}
    75%  {margin-top: -270px}
    95%  {margin-top: -270px}
}

/* The element to apply the animation to */
.menu {
    margin: 0;
    padding: 0;
    height: 90px;
    animation: example 8s infinite;
}

.menu li {
  display: block;
  margin: 0;
  padding: 0;
  height: 30px;
  line-height: 30px;
}

Answer 2

我认为只用html就可以实现这一点。

我建议尝试使用JQuery

高级选框转换

2 个答案: