JavaScriptのシームレスなスクロール

知識ポイント

このタグの使用は、w3c 標準 (構造、スタイル、動作) の機能分離に準拠していないため、現時点では推奨されません。

1. 動作のスクロール方法

[alternate]: 両端の間を前後にスクロールすることを意味します

[scroll]: 一方の端からもう一方の端までスクロールすることを意味し、それを繰り返します

[slide]: 一方の端からスクロールすることを意味します端から反対側へ 一方の端は繰り返されません

2. スクロール方向 [下]、[上]、[左]、[右]

3. ループのスクロール回数 (loop=-1 の場合、連続スクロールして再生することを意味します)チェス、デフォルトは -1)です

4.scrolllamountはアクティブな字幕のスクロール速度を設定します

5.scrolllayはアクティブな字幕を2回スクロールする間の遅延時間を設定します

 <marquee loop="-1" onmouseover="this.stop();" onmouseout="this.start();"></marquee>

JavaScriptで実装されています

html

<div  id="moocBox">
    <ul id="con1">
        <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
        <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
        <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
        <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
        <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
        <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>     
    </ul>   
</div>

css

/*  中间样式 */
#moocBox {
    height: 144px;
    width: 335px;
    margin-left: 25px;
    margin-top: 10px;
    overflow: hidden;    /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}

javascript

うわー