在沒有Jquery的Javascript中使用幻燈片效果

Question

我正在開發自己的libarary，我認爲幻燈片效果函數會很有用，另外，我製作了一個日曆/時鐘web應用程序，其目標是作爲儘可能的效果。到目前爲止我還沒有。抱歉。我在網上搜索。

Answer 1

如果您嘗試使文本滑入或滑出，CSS將是最有效的。您可以在for循環中使用Javascript setTimeout方法，但CSS動畫看起來最平滑。 我做了一個JSFiddle here。

下面是它背後的CSS。

div.slide { 
    transition: left, 2s; 
    -moz-transition: left, 2s; 
    -webkit-transition: left, 2s; 
    -ms-transition: left, 2s; 
    position:relative; 
    left:-150px; 
    border: solid black 2px; 
    width:50px; 
} 
div.hov { 
    border:solid black 2px; 
    position:absolute; 
    width:100px; 
} 
div.hov:hover div.slide { 
    left:48px; 
} 

突出顯示「日曆」以查看效果。