网页文字连续不间断滚动的特效代码

<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 -->
<a href=http://www.jzread.com/web/js/2010-01-08/376.html>滚动的文字链接1</a>
<br> <a href=http://www.jzread.com/web/js/2010-01-08/376.html>滚动的文字链接2</a>
<br> <a href=http://www.jzread.com/web/js/2010-01-08/376.html>滚动的文字链接3</a>
<br> <a href=http://www.jzread.com/web/js/2010-01-08/376.html>滚动的文字链接4</a>
<br> <!-- 字幕内容结束 -->
</div>
<!-- 以下是javascript代码 -->
<script language="javascript">
<!--
marqueesHeight=200; //内容区高度
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>

时间: 2024-09-22 16:48:39

网页文字连续不间断滚动的特效代码的相关文章

网页文字左右不间断滚动js代码

<style type="text/css">  #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-family:'宋体';background:#DDE5ED;color:#0C77CF;font-weight:bold;}  #gongao #scroll_begin, #gongao #scroll_end{display:inline}  <

jQuery实现自动与手动切换的滚动新闻特效代码分享_jquery

本文实例讲述了jQuery实现滚动新闻特效.分享给大家供大家参考.具体如下: jQuery实现滚动新闻代码是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.有三种展示新闻的方式,自动向下循环展示,自动向上循环展示以及手动循环展示,总有一款适合你的. 运行效果图:                                -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式.

文字不间断滚动(上下左右)实例代码_javascript技巧

向上 复制代码 代码如下: <!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 t

js特效:文字上下无间断滚动

第一行 第二行 第三行 第四行 第五行 第六行

js实现的文字横向无间断滚动_javascript技巧

我一开始想到的标签是<marquee>,因为它可以实现横向滚动.经理说它的起始位置从最右边出来的,能不能将它改成从中间出来,或者从最左边出来也行.查了相关资料,才知道<marquee>无法指定起始位置.后来在网上找到一段代码,它是用图片来实现的,我将图片改成文字之后,顺利地实现了我所想要的功能.代码如下: ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.con

图片连续不间断滚动像册_javascript技巧

CSS 布局演示 CSS Layout by Forestgan 2006-10-30 发表   My Photo 1Design by Forestgan 演示页面设计制作: Forestgan   采用创作共用授权--署名和非商业用途 返回前一页 google-analytics my stat

基于jquery 不间断滚动效果实现代码

神舟八号飞船返回舱在内蒙古着陆 潜山600万建皖公像 官方称是"安徽守护神" <看客>第116期:人在"堵"途

三款文字不间断滚动代码

<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接1</a> <br> <a href="#">链接2</a> <br> <a href="#">链接3</a> <br> <a href="#">

网页标准的随滚动条滚动的广告特效

<!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" xml:lang="en" lang="en"><he