javascript无缝滚动

Posted 2020-08-14

<marquee>知识点

现在这个标签不主张使用，因为不符合w3c标准（结构、样式、行为）功能性分离。

1.behavior滚动的方式

  【alternate】：表示在两端之间来回滚动

  【scroll】：表示由一端滚动到另一端，会重复

  【slide】：表示由一端滚动到另一端，不会重复

2.direction滚动的方向 【down】、【up】、【left】、【right】

3.loop滚动的次数（当loop=-1表示一直滚动下棋，默认为-1）

4.scrollamount设定活动字幕的滚动速度

5.scrolldelay设定活动字幕滚动两次之间的延迟时间

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

用javascript实现

html

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

 

css

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

 

javascript

 1    var area = document.getElementById(‘moocBox‘);
 2       var con1 = document.getElementById(‘con1‘);  
 3       var speed = 50;
 4       area.scrollTop = 0;    
 5       con1.innerHTML += con1.innerHTML;     
 6       function scrollUp() {       
 7           if (area.scrollTop >= con1.scrollHeight/2) {
 8               area.scrollTop = 0;
 9           } else {
10               area.scrollTop++;
11           }
12       }
13       var myScroll = setInterval("scrollUp()", speed);
14       area.onmouseover = function () {
15           clearInterval(myScroll);
16       }
17       area.onmouseout = function () {
18           myScroll = setInterval("scrollUp()", speed);
19       }