生成自下往上滚动的字幕
使用方法:设置需要滚动图层 id=marquees,然后调用下面代码
<SCRIPT language=JavaScript>
<!--
marqueesHeight=180; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",20);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</SCRIPT>
分享到:
相关推荐
jQuery图片从下往上滚动效果是一款jquery animate方法制作的图片从下往上滚动效果。
html css+纯js实现无缝连接循环的滚动字幕,内有注释
javascript简单代码文字从下往上无缝隙滚动,从顶部开始滚动,不会出现空白
JS 类似BBS控制输入框输入信息后,滚动条自动滚到最下方,始终显示最后输入的一条信息,在做BBS的兄弟,可以参考一下思想
用JavaScript和ASP制作连续滚动的字幕
用js制作滚动字幕,可以上下左右连续滚动
//滚动条滚动一次的间距px; // var tmpHeight=4;//滚动条滚动一次页码内容滚动的间距px; var connentHeight=barheight;//页面的的高度=滚动条的高度包括上下两个箭头; var barHeight=connentHeight-11*2;//...
js 实现 带链接的滚动字幕! 值得下载看看!资源免费,大家分享!!
水平滚动字幕循环滚动
JS上下无缝滚动效果JS上下无缝滚动效果JS上下无缝滚动效果
一款简单的js+css3文字上下滚动切换动画特效,可设置多种不同颜色的文字。
一般网站非常实用的上下左右滚动的跑马灯JS
web滚动字幕代码,不知道是否已经过时。测试成功。
帮你实现永不停止的滚动 帮你实现永不停止的滚动 帮你实现永不停止的滚动 帮你实现永不停止的滚动 帮你实现永不停止的滚动
js 上下(左右)图片滚动, 试过成功滚动
实现跑马灯上下滚动效果,marquee标签被摒弃后不使用js实现的跑马灯效果保险些
可以设置的内容上下滚动,很好的东西哦
js文字间隔滚动上下滚动
javascript上下无缝图片滚动,糯米网产品展示javascript效果