javascript无缝滚动_动视

javascript无缝滚动

2020-11-27 20:31:52 责编:小采

点击下载本文 文档为doc格式

知识点

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

1.behavior滚动的方式

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

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

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

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

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

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

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

用javascript实现

html

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

css

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

javascript

var area = document.getElementById('moocBox');
 var con1 = document.getElementById('con1'); 
 var speed = 50;
 area.scrollTop = 0; 
 con1.innerHTML += con1.innerHTML; 
 function scrollUp() { 
 if (area.scrollTop >= con1.scrollHeight/2) {
 area.scrollTop = 0;
 } else {
 area.scrollTop++;
 }
 }
 var myScroll = setInterval("scrollUp()", speed);
 area.onmouseover = function () {
 clearInterval(myScroll);
 }
 area.onmouseout = function () {
 myScroll = setInterval("scrollUp()", speed);
 }

下载本文

显示全文

全部频道