项目中用到的一段不间断的滚动代码,很不错,与大家分享一下。(请注意,javascript是写在页面的最下方)
1、纵向不间断的滚动的页面代码:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 无标题页 </ title >
</ head >
< body >
< div >
站内公告 </ div >
< div id ="demo" style ="OVERFLOW: hidden; height: 100px;" >
< div id ="marquePic1" >
第1行 < br />
第2行 < br />
第3行 < br />
第4行 < br />
第5行 < br />
第6行 < br />
第7行 < br />
第8行 < br />
第9行 < br />
第10行 < br />
第11行 < br />
第12行
</ div >
< div id ="marquePic2" valign ="top" >
</ div >
</ div >
</ body >
</ html >
< script type ="text/javascript" >
// 纵向滚动 需要设置div的高度
var speed = 30
marquePic2.innerHTML = marquePic1.innerHTML
function Marquee(){
if (demo.scrollTop >= marquePic1.scrollHeight){
demo.scrollTop = 0
}
else {
demo.scrollTop ++
}}
var MyMar = setInterval(Marquee,speed)
demo.onmouseover = function () {clearInterval(MyMar)}
demo.onmouseout = function () {MyMar = setInterval(Marquee,speed)}
</ script >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 无标题页 </ title >
</ head >
< body >
< div >
站内公告 </ div >
< div id ="demo" style ="OVERFLOW: hidden; height: 100px;" >
< div id ="marquePic1" >
第1行 < br />
第2行 < br />
第3行 < br />
第4行 < br />
第5行 < br />
第6行 < br />
第7行 < br />
第8行 < br />
第9行 < br />
第10行 < br />
第11行 < br />
第12行
</ div >
< div id ="marquePic2" valign ="top" >
</ div >
</ div >
</ body >
</ html >
< script type ="text/javascript" >
// 纵向滚动 需要设置div的高度
var speed = 30
marquePic2.innerHTML = marquePic1.innerHTML
function Marquee(){
if (demo.scrollTop >= marquePic1.scrollHeight){
demo.scrollTop = 0
}
else {
demo.scrollTop ++
}}
var MyMar = setInterval(Marquee,speed)
demo.onmouseover = function () {clearInterval(MyMar)}
demo.onmouseout = function () {MyMar = setInterval(Marquee,speed)}
</ script >
2、横向不间断的滚动的页面代码:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 无标题页 </ title >
</ head >
< body >
< div >
站内公告 </ div >
< div id ="demo" style ="overflow: hidden; width: 860px; align: center" >
< table cellspacing ="0" cellpadding ="0" align ="center" border ="0" >
< tbody >
< tr >
< td id ="marquePic1" valign ="top" >
< table width ="1800px" >
< tr >
< td > 第1个单元格 </ td >
< td > 第2个单元格 </ td >
< td> 第3个单元格 </ td >
< td > 第4个单元格 </ td >
< td > 第5个单元格 </ td >
< td > 第6个单元格 </ td >
< td > 第7个单元格 </ td >
< td > 第8个单元格 </ td >
< td > 第9个单元格 </ td >
< td > 第10个单元格 </ td >
< td > 第11个单元格 </ td >
< td > 第12个单元格 </ td >
< td > 第13个单元格 </ td >
< td > 第14个单元格 </ td >
< td > 第15个单元格 </ td >
</ tr >
</ table >
</ td >
< td id ="marquePic2" valign ="top" >
</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ body >
</ html >
< script type ="text/javascript" >
// 横向滚动 需要设置div的宽度
var speed = 30
marquePic2.innerHTML = marquePic1.innerHTML
function Marquee(){
if (demo.scrollLeft >= marquePic1.scrollWidth){
demo.scrollLeft = 0
} else {
demo.scrollLeft ++
}}
var MyMar = setInterval(Marquee,speed)
demo.onmouseover = function () {clearInterval(MyMar)}
demo.onmouseout = function () {MyMar = setInterval(Marquee,speed)}
</ script >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 无标题页 </ title >
</ head >
< body >
< div >
站内公告 </ div >
< div id ="demo" style ="overflow: hidden; width: 860px; align: center" >
< table cellspacing ="0" cellpadding ="0" align ="center" border ="0" >
< tbody >
< tr >
< td id ="marquePic1" valign ="top" >
< table width ="1800px" >
< tr >
< td > 第1个单元格 </ td >
< td > 第2个单元格 </ td >
< td> 第3个单元格 </ td >
< td > 第4个单元格 </ td >
< td > 第5个单元格 </ td >
< td > 第6个单元格 </ td >
< td > 第7个单元格 </ td >
< td > 第8个单元格 </ td >
< td > 第9个单元格 </ td >
< td > 第10个单元格 </ td >
< td > 第11个单元格 </ td >
< td > 第12个单元格 </ td >
< td > 第13个单元格 </ td >
< td > 第14个单元格 </ td >
< td > 第15个单元格 </ td >
</ tr >
</ table >
</ td >
< td id ="marquePic2" valign ="top" >
</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ body >
</ html >
< script type ="text/javascript" >
// 横向滚动 需要设置div的宽度
var speed = 30
marquePic2.innerHTML = marquePic1.innerHTML
function Marquee(){
if (demo.scrollLeft >= marquePic1.scrollWidth){
demo.scrollLeft = 0
} else {
demo.scrollLeft ++
}}
var MyMar = setInterval(Marquee,speed)
demo.onmouseover = function () {clearInterval(MyMar)}
demo.onmouseout = function () {MyMar = setInterval(Marquee,speed)}
</ script >