首页 > 代码库 > javascript无缝滚动

javascript无缝滚动

2024-08-16 09:43:43   216人阅读

<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" onm ouseover="this.stop();" onm ouseout="this.start();"></marquee>

用javascript实现

html

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

 

 

javascript无缝滚动


联系
我们