文字不间断滚动(转)

向上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向上滚动</title>
<style type="text/css">

</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a><br>
<br>
<a href="#">链接二</a><br>
<br>
<a href="#">链接三</a><br>
<br>
<a href="#">链接四</a><br>
<br>
</div>
<script language="JavaScript">

marqueesHeight=200;
stopscroll=false;

with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
οnmοuseοver=new Function("stopscroll=true");
οnmοuseοut=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0;

function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",100);
}
document.body.οnlοad=init;

function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>
</body>
</html>

向下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向下滚动</title>
<style type="text/css">

</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a><br>
<br>
<a href="#">链接二</a><br>
<br>
<a href="#">链接三</a><br>
<br>
<a href="#">链接四</a><br>
<br>
</div>
<script language="JavaScript">

marqueesHeight=200;

function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollDown()",10);
}init();

function scrollDown(){
if(stopscroll==true) return;

preTop=marquees.scrollTop;
marquees.scrollTop-=1;
if(preTop==marquees.scrollTop){
if(!getlimit){
marquees.scrollTop=templayer.offsetHeight*2;
getlimit=marquees.scrollTop;
}
marquees.scrollTop=getlimit-templayer.offsetHeight+marqueesHeight;
marquees.scrollTop-=1;
}
}
</script>
</body>
</html>

向左

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向左滚动</title>
<style type="text/css">

</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a> <a href="#">链接二</a> <a href="#">链接三</a> <a href="#">链接四</a> </div>
<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">

marqueesWidth=200;

with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
οnmοuseοver=new Function("stopscroll=true");
οnmοuseοut=new Function("stopscroll=false");
}
preLeft=0; currentLeft=0; stopscroll=false;

function init(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollLeft()",100);
}init();

function scrollLeft(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft+=1;
if(preLeft==marquees.scrollLeft){
marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
}
}

</script>
</body>
</html>

向右

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向右滚动</title>
<style type="text/css">

</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a> <a href="#">链接二</a> <a href="#">链接三</a> <a href="#">链接四</a> </div>
<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">

marqueesWidth=200;

function scrollRight(){
if(stopscroll==true) return;

preLeft=marquees.scrollLeft;
marquees.scrollLeft-=1;
if(preLeft==marquees.scrollLeft){
if(!getlimit){
marquees.scrollLeft=templayer.offsetWidth*2;
getlimit=marquees.scrollLeft;
}
marquees.scrollLeft=getlimit-templayer.offsetWidth+marqueesWidth;
marquees.scrollLeft-=1;
}
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/elevenlang/archive/2013/04/21/3034278.html

文字不间断滚动(转)相关推荐

msclass 文字滚动_MSClass 图片/文字不间断滚动\间歇滚动\翻屏滚动类
/*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.65*\ 制作时间:2006-08-29 (Ver 0.5) 发布时间:2006-08-31 ...
msclass 文字滚动_【JS特效】不间断滚动效果通用类
网上发现一个不错的js不间断滚动效果,今天来转载一下吧.这个js的作者应是崔永祥(因其博客已不存在,而无法确认),我这里只简单整理,只为笔记. ??? 需要通过样式,js来实现这个翻滚效果. ??? ...
html js 链接滚动效果,【JS特效】不间断滚动效果通用类
网上发现一个不错的js不间断滚动效果,今天来转载一下吧.这个js的作者应是崔永祥(因其博客已不存在,而无法确认),我这里只简单整理,只为笔记. ??? 需要通过样式,js来实现这个翻滚效果. ??? ...
msclass 文字滚动_文字无缝循环滚动（标题向上滚动）
要写一个标题滚动的效果,开始以为挺简单用marquee就行了呢.用了才知道,它总是要等一次滚动后再循环,所以很不好看.才知道只有用js了. 在网上找了一个js感觉挺好的. ============== ...
原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script>window.onload = roll(50); f ...
html 向上滚动不间断,向上不间断滚动div+css+js模板
div+css不间断向上滚动模板上一次给大家介绍一种div css的不间断滚动代码JS特别多(不间断滚动css代码),这次给大家介绍的是比较实用比较简单的不间断css滚动代码 DIV+CSS不间断滚 ...
html怎么设置文字滚动效果,css如何实现滚动文字，实现滚动文字的代码
css如何实现滚动文字,实现滚动文字的代码发布时间:2020-05-09 10:35:36 来源:亿速云阅读:228 作者:小新这篇文章主要为大家详细介绍了css如何实现滚动文字,实现滚动文字的 ...
原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...
android文字自动滚动,Android TextView文字横向自动滚动(跑马灯)
TextView实现文字滚动需要以下几个要点: 1.文字长度长于可显示范围:android:singleLine="true" 2.设置可滚到,或显示样式:android:elli ...

文字不间断滚动(转)

文字不间断滚动(转)相关推荐

最新文章

热门文章