你的位置:首页 > Java教程

[Java教程]javascript无缝滚动


<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    }