高級選取框轉換

<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個元素將通過向上滑動而變得可見。我如何達到這個效果？高級選取框轉換

來源

2016-02-06 Ankit Sahu

不要使用選框來試試，是不是所有瀏覽器都支持，並計劃刪除。來源：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; 
}

來源

2016-02-06 17:00:59 dejakob

我不認爲這可以用html來實現。

我會建議使用JQuery

來源

2016-02-06 16:05:59 anned20

高級選取框轉換

回答

相關問題